If the page doesn't have much content, like 300 pixels or so, the footer will appear in the middle of the page on a 1024 resolution.
How could I make my footer show to bottom of the page without knowing the footer height?
I've tried this solution:
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div i开发者_如何学运维d="footer"></div>
</div>
</body>
</html>
but the problem is that I would need to add padding-bottom: (footerheight); in the element before the #footer. This is not possible because the footer height is variable depending on the page...
Why don't you just use min-height on the content area so if u set the min-height to 600px if theres only 300px of content it will pad the footer down another 300px so it isn't in the middle of the screen
You can't escape this but there is a trick: make the body background the same as that of the footer and then put all other content inside a container on top of the body.
This will make a 75px footer. Note the related -75px margin of the container div.
html {
height:100%;
padding:0px;
margin:0px;
}
body {
height:95%;
padding:0px;
margin:0px;
background-color:#1C303C;
}
footer {
background-color:#1C303C;
color:#FFFFA3;
display:block;
position:absolute;
width:100%;
min-height:75px;
height:75px;
margin:0px;
padding:0px;
left:0px;
}
#container {
background-color:#FFFFFF;
min-height:100%;
height:100%;
width:100%;
top:0;
left:0;
margin: 0;
padding:0;
margin-bottom:-75px;
}
with relevant HTML as follows:
<body>
<div id="container">
</div>
<footer>
</footer>
</body>
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论