web-style.css

最新推荐文章于 2024-01-09 20:48:14 发布

原创最新推荐文章于 2024-01-09 20:48:14 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了一种使用HTML和CSS实现的网页布局方案，通过不同样式的div和frame元素，实现了高度自适应且隐藏滚动条的效果。该布局将页面分为左右两部分，并确保每个区块能够自动调整大小以适应不同的屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html,body{height:100%;margin:0;padding:0;width:100%;overflow:hidden;}
.div-web{width:100%;height:85%;margin:0px;padding:0px;overflow:hidden;}
.div-left{width:50%;height:100%;float:left;margin:0px;padding:0px;overflow:hidden;text-align:center;}
.div-right{width:50%;height:100%;float:left;margin:0px;padding:0px;overflow:hidden;text-align:center;}
.div-web-left{width:100%;height:100%;float:left;margin:0px;padding:0px;overflow:hidden;text-align:center;}
.div-web-right{width:100%;height:100%;float:left;margin:0px;padding:0px;overflow:hidden;text-align:center;}
.div-excel-left{width:100%;height:100%;float:left;margin:0px;padding:0px;overflow:hidden;text-align:center;}
.div-excel-right{width:100%;height:100%;float:left;margin:0px;padding:0px;overflow:hidden;text-align:center;}
.frame-web-left{width:100%;height:100%;margin:auto;padding:0px;overflow:hidden;display:none;}
.frame-web-right{width:100%;height:100%;margin:auto;padding:0px;overflow:hidden;display:none;}
.frame-excel-left{width:100%;height:100%;margin:auto;padding:0px;overflow:hidden;display:block;}
.frame-excel-right{width:100%;height:100%;margin:auto;padding:0px;overflow:hidden;display:block;}