CSS两列布局，流体高度为100％
[英]CSS two column layout with fluid height 100%
问题描述
This is my layout - I use this for 2 pages. 
这是我的布局-我用了2页。 I need to be full height (100%) and flexible height in same time. 我需要同时达到全高（100％）和灵活的高度。 Red block is empty, only a title/subtitle and full bg (cover) image. 红色块为空，只有标题/字幕和完整的bg（封面）图像。
In right side I have small text for first page, and a lot of text for 2nd page, this is why I need to be fluid. 在右侧，第一页有少量文字，第二页有大量文字，这就是为什么我需要保持流畅的原因。
I tryied more methods but I can't make it work.. and I don't want to use js - only pure css2. 我尝试了更多的方法，但我无法使其工作..而且我不想使用js-仅使用纯css2。
Can someone help me? 有人能帮我吗？ thanks. 谢谢。
3 个解决方案
解决方案1
3 2014-06-26 14:58:15
One possibility to achieve what you want would be to use display:table & display:table-cell : 实现您想要的一种可能性是使用display:table和display:table-cell ：
#content {
width: 100%;
display: table;
}
#left, #right {
width: 50%;
display: table-cell;
}
You could also work with flex-box . 您也可以使用flex-box 。
解决方案2
-1 2014-06-26 15:12:07
It will work if you want change the height of .top and .bottom remember that change the value of var heighs this is (.bottom .top) height Java script (jquery) 如果您想更改.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 HTML
<body style='margin:0px'>
<div class='top'>
</div>
<div class='red'>
</div>
<div class='gray'>
</div>
<div class='bottom'>
</div>
</body>
Css 的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>
解决方案3
-2 2014-06-26 14:58:37
我只建议您使用Bootstrap，而您不必担心-查看其网格getbootstrap.com
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.