一个div为200px;另一个div如何占满剩余页面

最新推荐文章于 2023-01-03 09:15:27 发布

一晌贪欢i

最新推荐文章于 2023-01-03 09:15:27 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_27674439/article/details/99702812

本文探讨了在网页设计中，如何使用不同CSS技巧使两个div元素分别固定宽度和填充剩余空间的方法。通过具体实例，展示了如何利用浮动、margin、position属性及calc函数实现布局需求。

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

一个div为200px;另一个div如何占满剩余页面（两个div为兄弟元素）？首先这这题我理解错了，我以为宽高都要为200px,然后另一个怎么占满页面，这样的话为啥还要两个div布局啊？我先写出只有定宽或者定高布局的情况吧。
宽度确定：

//方案一
<body style="margin:0;padding:0;height:100%;width:100%;position:absolute;">
<div style="background-color:#c7c7c7;width:300px;height:100%;float:left;">
</div>
<div style="background-color:red;height:100%;margin-left:300px;"></div>
</body>

//方案二
<body style="margin:0;padding:0;height:100%;width:100%;position:absolute;">
<div style="background-color:#c7c7c7;width:300px;height:100%;float:left;">
</div>
<div style="background-color:red;height:100%;overflow:hidden;"></div>
</body>

body块级元素没有高度，要铺满屏幕高度可以设置body为absolute，再去设置宽度和高度，如果不设置宽度，也不是满屏的宽度，

利用的第一个div浮动之后不占据文档流，第二个div不设置宽度，默认宽度是父元素的100%，加一个margin-left，让内容不被第一个div所盖住，第二个div清楚浮动

高度确定：

//方案一
<body style="margin:0;padding:0;height:100%;width:100%;position:absolute;">
<div style="background-color:#c7c7c7;width:100%;height:300px;float:left;">
</div>
<div style="background-color:red;height:calc(100% - 300px);margin-top:300px;"></div>
</body>

//方案二

<body style="margin:0;padding:0;height:100%;width:100%;position:absolute;">
<div style="background-color:#c7c7c7;width:100%;height:100px;">
</div>
<div style="background-color:red;width:100%;position:absolute;top:100px;bottom:0px;"></div>
</body>

方案一利用calc方法,当然这里不用calc方法也行，直接设置height为100%也行。

方案二利用position top和bottom去拉高高度，更灵活.这里用上面定宽的方案为也行啊。

好的，这里我们再回到上面第一个问题如果div1的宽度和高度同时为200px,另一个div2如何占领剩余所有页面？
这时我们可以用一个最简单的方法，把div2分成两个div3和div4,这样用上面的方法一个占领左边，一个占领右边就行了。如果div2不给拆分怎么办？这题重点是不让重叠，所以真遇到这种布局，实践开发中也不会只用2个div的，还是要拆分。