gpt4 book ai didi

javascript - 两列全高布局扩展以包含内容

转载 作者:太空宇宙 更新时间:2023-11-04 14:15:41 24 4
gpt4 key购买 nike

我已经尝试了很多方法,从使用 javascript 来均衡列的高度,但它很困惑并导致其他问题。

我尝试过纯 css,但我发现的所有解决方案都有一个缺点。

最受欢迎的似乎是涉及

body, html { height:100%;}
.col{width:50%; height:100%; float:left;}

<body>
<div class="col left">1st col
<div class="bigdiv">yo</div>
<div class="bigdiv">yo</div>
<div class="bigdiv">yo</div>
</div>
<div class="col right">2nd col</div>

但如果其中一列比页面长,则不会拉伸(stretch)。

http://jsfiddle.net/8nAA4/1/

一定有一种简单的方法可以做到这一点,我一定是愚蠢的,但我已经尝试了几天不同的方法并且它正在努力。

php、javascript、html 都很简单。 css 仍然让我感到困惑!

最佳答案

使用

body{
display: table;
}
.col{
display: table-cell;
}

Demo

关于javascript - 两列全高布局扩展以包含内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20382483/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com