CSS两列布局，流体高度为100％

Question

这是我的布局-我用了2页。 我需要同时达到全高（100％）和灵活的高度。 红色块为空，只有标题/字幕和完整的bg（封面）图像。

在右侧，第一页有少量文字，第二页有大量文字，这就是为什么我需要保持流畅的原因。

我尝试了更多的方法，但我无法使其工作..而且我不想使用js-仅使用纯css2。

有人能帮我吗？ 谢谢。

Answer 1

实现您想要的一种可能性是使用display:table和display:table-cell ：

#content {
    width: 100%;
    display: table;
}

#left, #right {
    width: 50%;
    display: table-cell;
}

演示

您也可以使用flex-box 。

Flexbox指南

Answer 2

如果您想更改.top和.bottom的高度，它将起作用。请记住，更改var heighs的值是（.bottom .top）height Java脚本（jquery）

<script type="text/javascript" src="http://www.designerbh.com/index_files/jquery-1.9.1.min.js"></script>
<script>
setInterval(function(){
    var heights=$("body").height();
    var heights=heights-100;
    console.log(heights);
    $(".red ,.gray").css({'height':heights});
},100);
</script>

HTML

<body style='margin:0px'>
<div class='top'>

</div>
<div class='red'>

</div>
<div class='gray'>

</div>

<div class='bottom'>

</div>
</body>

的CSS

<style>
.top{
float:left;
width:100%;
height:50px;
background:black;
color:white;
}
.red{
float:left;
width:50%;
height:100%;
background:red;
}
.gray{
float:left;
width:50%;
height:100%;
background:#ccc;
}
.bottom{
float:left;
width:100%;
height:50px;
background:black;
color:white;
}
</style>

Answer 3

我只建议您使用Bootstrap，而您不必担心-查看其网格getbootstrap.com

CSS两列布局，流体高度为100％

问题描述

3 个解决方案

解决方案1
3 2014-06-26 14:58:15

解决方案2
-1 2014-06-26 15:12:07

解决方案3
-2 2014-06-26 14:58:37

CSS两列布局，流体高度为100％

问题描述

3 个解决方案

解决方案1 3 2014-06-26 14:58:15

解决方案2 -1 2014-06-26 15:12:07

解决方案3 -2 2014-06-26 14:58:37

解决方案1
3 2014-06-26 14:58:15

解决方案2
-1 2014-06-26 15:12:07

解决方案3
-2 2014-06-26 14:58:37