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

标签 javascript html css layout

我已经尝试了很多方法,从使用 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/

相关文章:

Javascript – 创建 "some"函数

javascript - 使用 javascript 在页面上嵌入 YouTube 视频

javascript - 样式化 'FILE' 输入类型元素

javascript - Ramda 忽略键和值(如果它们都匹配)

caching - 什么情况下浏览器会缓存<video>文件?

html - :focus ring removal on :before pseudo-element

html - 基金会进入轨道第一张幻灯片

php - 无法将自定义输入添加到 3rd 方 symfony 包

javascript - 根据屏幕是 16 :9, 16 :10, 还是 4:3 更改 CSS

css - 浏览器的 jquery 屏幕(位置)