Question

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

在右侧，我的第一页有小文字，第二页有很多文字，这就是我需要流畅的原因。

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

有人能帮助我吗？感谢。

Answer 1

实现目标的一种可能性是使用display:table＆amp; display:table-cell：

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

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

DEMO

您也可以使用flex-box。

Flexbox guide

Answer 2

如果你想改变.top和.bottom的高度，它会工作。记得改变var的值，这是（.bottom .top）的高度 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，你不必担心 - 看看他们的griding getbootstrap.com

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

3 个答案: