CSS position fixed some ; i want it to be at absolute bottom and body to be just above it
I positioned a div at the bottom, but the last part of the body disappears. How do I fix this?
#fixed {
position: fixed;
width:100%;
top: 95%;
height:2em;
left: 0px;
display:block开发者_StackOverflow中文版;
color: #F0F8FF;
background-color:#00008B;
}
<body>
<div id="fixed">
Login Login
</div>
<dv id="content-box">
<p>KAKAK</p>
<p>KAKAK</p><p>KAKAK</p>
<p>KAKAK</p>
<p>KAKAK1</p>
<p>KAKAK2</p>
</div>
</body>
Give bottom padding to the body equal to the height of the div.
body{
padding-bottom:2em;
}
but you also have to change in your code the top: 95%; to bottom:0; in the #fixed rule, because the height is not known so the remaining 5% might be less than the 2em height of the div (it causes the div to move outside of the body ..).
demo at http://jsfiddle.net/gaby/cvxtk/1/
You want to put the fixed div at the bottom and specify 95% for the top, like so:
<body>
<body>
<div id="content-box">
<p>KAKAK</p>
<p>KAKAK1</p>
<p>KAKAK2</p>
</div>
<div id="fixed">
Login Login
</div>
</body>
</body>
</html>
Add css info for the content div so it looks something like this:
#fixed {
position:fixed;
width:100%;
top:95%;
bottom:0px;
height:2em;
left:0px;
display:block;
color:#F0F8FF;
background-color:#00008B;
}
#content-box {
padding-bottom: 20em;
}
加载中,请稍侯......
精彩评论