如果内容比视口长,我正在尝试获得一个始终位于视口底部的页脚。如果内容没有延伸到视口的底部,则页脚将停留在内容的底部。
这是我的 HTML:
<div id="wrapper">
<!-- variable content and other divs in here -->
<div id="footersurround">
<div id="footerparent">
<div id="footer"></div>
<div id="linkshome"><!-- links in here --></div>
</div>
</div>
</div>
和 CSS:
#wrapper {
position: absolute;
left: 50%;
width: 1024px;
margin: -512px;
margin-top: 8px;
}
#footersurround {
position: fixed;
top: 0;
max-width: 1024px;
width: 100%;
height: 100%;
max-height: inherit; /* I want this to take the same value as the wrappers height if I set it to a value(e.g 768px) it works perfectly but when setting it to inherit it will stretch the whole viewport even if the wrapper does not*/
}
#footerparent {
position: absolute;
bottom: 0;
width: 100%;
z-index: 30;
}
#footer {
position: absolute;
bottom: 0;
margin: 0 auto;
min-height: 60px;
width: 1024px;
background-color: black;
opacity: 0.50;
filter: alpha(opacity=50); /* For IE8 and earlier */
z-index: 16;
}
#linkshome {
position: absolute;
bottom: 0;
margin: 0 auto;
margin-top: -47px;
min-height: 47px;
width: 100%;
max-width: 1074px;
z-index: 17;
text-align: center;
font-size: 24px;
font-family: Verdana;
color: white;
}