css layout with header, footer and multi-column scroled
Question
I am attempting to create a webpage layout template my aim is header, footer and 2 column between, the 2 columns are what are giving me the biggest headache, I want the left column to be a fixed width, and the right column to fill the remaining area, I have successfully completed this also. But I also want both columns' to fill the raining space vertically also and when the content fills more than the space I am looking each column to be scolded separately and not use the normal Brower scroll bar
My current html code is as follows
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style/default/style.css" />
</head>
<body>
<div class="container">
<div class="header">
HEADER
</div>
<div class="content">
<div class="content-contain">
<div id="content-col1">
COLUMN 1
</div>
<div id="content-col2">
COLUMN 2
</div>
</div>
</div>
</div>
<div class="footer">
FOOTER
</div>
</body>
</html>
CSS
* {
margin: auto;
}
html, body {
height: 99%;
background-color: #FFFFFF;
font-family:sans-serif;
}
.container {
min-height: 100%;
height: auto !important;
height: 99%;
margin: 0 auto -1em;
}
.header {
color:#FFFFFF;
background-color:blue;
border-bottom:3px solid blue;
}
div#content-col1{
float:left;
width:220px;
padding:3px;
display:block;
padding-left:5px;
overflow-y: auto;
background-color: red;
}
div#content-col2{
margin-left: 230px;
margin-bottom:40px;
padding: 3px;
overflow-y: auto;
background-color: green;
}
.footer {
background-color:yellow;
clear:both;
}
If anyone has a better or know what I can do to make this work sucessfully please let me know
Vip32
1 answers
solution1
1 2013-02-15 12:31:07
To fill the entire width with two columns where one has a fixed with, please refer to this question .
Vertical filling is a little different. On default, the body and block elements have a dynamic height. Because the body is dynamic too, you have to set it an height in order to make the content full vertically as well.
body, div#container, ... { height: 100%; }
Some people think it's best to apply an height to the html element as well. I have my doubts, because that tag is not visible.
If you have an element that requires some height as well, like an header, or footer, please refer to the same solution for fixed width's but apply it on the height instead.
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.