CSS two column layout with fluid height 100%
Question
This is my layout - I use this for 2 pages. I need to be full height (100%) and flexible height in same time. Red block is empty, only a title/subtitle and full bg (cover) image.
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.
Can someone help me? thanks.
3 answers
solution1
3 2014-06-26 14:58:15
One possibility to achieve what you want would be to use display:table & display:table-cell :
#content {
width: 100%;
display: table;
}
#left, #right {
width: 50%;
display: table-cell;
}
You could also work with flex-box .
solution2
-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)
<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>
solution3
-2 2014-06-26 14:58:37
我只建议您使用Bootstrap，而您不必担心-查看其网格getbootstrap.com
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.