Auto expanding side column
I am building a webpage and it has a div tag called content which has a CSS property of min-height: 200px; I want to put in another div开发者_运维百科 tag with a height of 100%, however, this does not work. I want it to automatically grow so that it looks nice when content gets larger. However I am unsure how to do this.
Any help is appreciated, but I want it to be XHTML strict and CSS3 compatible.
Trying to do something like this:
-They gray side bar, is what I wanted to do, it was added in paint, the rest I have already done with CSS3.
I understood the issue with height: 100% Here is how I would do it using only css:
here it is:
<html>
<head>
<style type="text/css">
body{
background-color: #cbf;
}
#wrap {
border-radius: 20px;
margin: 10px auto;
overflow: hidden;
width: 900px;
}
#head {
text-align: center;
background-color: red;
height: 100px;
overflow: hidden;
}
#main {
float: left;
background-color: gray;
min-height: 200px;
}
#sidebar {
width:200px;
float: left;
background-color: gray;
}
#content {
float:left;
background-color: white;
min-height: 200px;
width: 700px;
}
</style>
<title>
example
</title>
</head>
<body>
<div id="wrap">
<div id="head">
<h1>example site name</h1>
</div>
<div id="main">
<div id="sidebar">
</div>
<div id="content">
<p>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
***</br></br></br>
</p>
</div>
</div>
</div>
</body>
</html>
You can also alternatively create the sidebar with
#wrap {
background: url('bg.png') repeat-y white;
}
bg.png needs to be a 1 pixel high image that has the same width as the siderbar. using css height 100% will not work in this case.
Hope this helps.
加载中,请稍侯......
精彩评论