I asked yesterday a question about css div positioning, now I solved my issue with your answers, but now I have another problem let me try to explain,
I have a page as shown above, I want that "B" div has 100% height but there is something wrong with absolute divs when "C" has long content then "B" is not following "C" and the 100% height doesn't work. When the position property of is set to fixed then it works on IE but not on chrome.
Here is the CSS code,
*
{
padding: 0;
margin: 0;
}
#container
{
background-color: Fuchsia;
height:100%;
width:100%;
position: absolute;
}
#a
{
width: 100%;
height: 100%;
background-image: url(images/img01.jpg);
background-repeat: repeat-x;
position: absolute;
z-index:0;
}
#b
{
margin-left: 40px;
float: left;
background-image: url(images/left_menu_filler.jpg);
background-repeat: repeat-y;
position: absolute;
margin-top: 0px;
height: 100%;
}
#c
{
width: 800px;
height: 10200px;
margin-top: 125px;
margin-left: 230px;
background-color: #999999;
position: absolute;
}
#d
{
width: 0px;
height: 0px;
margin: 10px 20px 0px 0px;
background-color: #ff0220;
开发者_运维技巧 position: absolute;
}
#e
{
width: 300px;
height: 26px;
margin: 0px 80px 0px 0px;
float: right;
background-color: #ff0220;
}
Can you please help me with that problem ? Which properties should I change ?
If you're just trying to extend a background color to the bottom of the page, you could implement some good ol' faux columns:
http://www.alistapart.com/articles/fauxcolumns/
The idea is that you add a background-image to your container div (or body element) that is the same width as column "B". Use background-position to get it aligned correctly, then set background-repeat to repeat-y.
Also, for what it's worth, Using absolute-positioning for every element in your document is almost certainly going to cause more problems than it solves. I'd recommend making a better attempt at using the normal document flow to get your layout to work.
<script type="text/javascript">
function fitContent() {
var contentHeight1 = window.innerHeight - 154;
var contentHeight2 = document.documentElement.clientHeight - 154;
if (window.innerWidth) {
//for browsers that support window.innerWidth
document.getElementById("...").style.height = contentHeight1 + "px"
}
else if (document.documentElement.clientHeight) {
//for browsers that support document.body.clientWidth
document.getElementById("...").style.height = contentHeight2 + "px"
}
}
window.onload = fitContent;
window.onresize = fitContent;
</script>
精彩评论