How can I make columns full height of window between header and footer with CSS and prevent underwrap
Question
I want to make a simple HTML layout using CSS where I have a header, two columns where the column on the right is a fixed width (say 100px for now). The left column will at some point have generated content, it shouldn't run past the page bottom but it may it may in the future... anyway I want both of my columns to stretch to the footer... here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Coming soon...</title>
</head>
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
Content Here will be dynamic... sometimes 1 word, sometimes 1000 words! Either way, I want to reach the footer!
</div>
<div class="right-menu">
Here will be a menu... I want this to be the same height as
the content DIV
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
and here is my CSS:
.header {
background-color: Coral ;
width: 100%;
}
.content {
background-color: BlanchedAlmond ;
float:left;
width:100%;
margin-right: -100px;
}
.right-menu {
background-color: BurlyWood ;
float: right;
width: 100px;
}
.footer {
background-color: Coral;
width: 100%;
clear: both;
position: absolute;
bottom: 0;
}
I made a JSFiddle of this and I noticed that my content div also seems to run under my menu... how could I prevent this too: https://jsfiddle.net/dwn82s81/
Many thanks in advance. I realized that I haven't written any CSS for ages!
2 answers
solution1
0 2016-10-12 20:12:22
Try this change to .content
.content { background-color: BlanchedAlmond ; float:left; width: 95%; margin-right: -100px; }
solution2
-1 2016-10-12 20:12:24
If you are willing to limit IE compatibility then you could use display:flex
Please note that this is a very basic setup.
html, body { height: 100%; } .wrapper { display: flex; flex-direction: column; height: 100%; } .content-wrapper { flex: 0 0 70%; background: orange; display: flex; } .content { flex: 1 0 auto; } .right-menu { flex: 0 1 150px; } .header, .footer { flex: 0 0 15%; }
<div class="wrapper"> <div class="header"> Header </div> <div class="content-wrapper"> <div class="content"> Content Here will be dynamic... sometimes 1 word, sometimes 1000 words! Either way, I want to reach the footer! </div> <div class="right-menu"> Here will be a menu... I want this to be the same height as the content DIV </div> </div> <div class="footer"> footer </div> </div>
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.