请教css高手:子容器高度占满父容器高度应该怎么做?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了请教css高手:子容器高度占满父容器高度应该怎么做?相关的知识,希望对你有一定的参考价值。

比如有这样一个布局:
<div id="ward">
<div id="top"></div>
<div id="content">
<div id="left"></div
<div id="right"></div>
</div
<div id="tutton"></div>
</div>
这是一个简单得两列布局
当content不设置高度,它得高度会根据right得内容自适应,问题来了left高度要怎么要怎么样才能跟content得高度一样?我设置过left得height为100%但是没用.

参考技术A 父容器content的position属性设置为relative,left的position属性设置为absolute,top:0 left 0本回答被提问者采纳 参考技术B .div2
height: 200px;

.div2 div
height: 100%;
border: 1px solid #003;

同级DIV占满父元素,CSS。

代码大概类似如下,页面没有固定高度的元素,同一父容器中的“.box”内容不一致,高度也不一致。只用CSS,不用JS,不改变页面结构如何实现让“.box”的高度保持一致,就是边框一样大。3Q。

<html>
<head>
<style>
.boxdisplay: inline-table;width:100;border:1px solid;margin:5px
</style>
</head>
<body>
<div>
高度未知的元素
</div>
<div>
高度未知的元素
</div>
<div>
高度未知的元素
</div>
<div style="position:relative">
<div class="box">
高度未知的元素
</div>
<div class="box">
高度未知的元素
<br/>
高度未知的元素
</div>
<div class="box">
高度未知的元素
</div>
</div>
<div style="position:relative">
<div class="box">
高度未知的元素
</div>
<div class="box">
高度未知的元素
<br/>
高度未知的元素
</div>
<div class="box">
高度未知的元素
</div>
</div>

</body>
</html>
最终效果如图。

如果您的意思是所有边框都按照最高高度(内容最多的框高度)来统一高度的话,css是做不到的。只能写死,因为css只负责视图,不负责动作。 参考技术A 好像不行吧,在不使用js的情况下,要不就统一给定高度,不给定高度,那么div就随内容的高度变化,内容不同,高度应该是不会统一的 参考技术B .boxheight:100%

然后外层DIV自然撑开

以上是关于请教css高手:子容器高度占满父容器高度应该怎么做?的主要内容,如果未能解决你的问题,请参考以下文章

同级DIV占满父元素,CSS。

CSS 设置 高度撑满 页面

flex布局总结

div+css 父容器是自动高度,几个子容器也是自动高度,怎样兼容浏览器,父容器自适应高度?

div css怎么让子容器超出父容器

请问css中如何让div铺满父容器?