Basically my page consists of
a) a main div, #main b) a header, #header c) a div, #contain d) a footer, #footer
The content of the page goes into the contain div.
Code:
#main{
position: absolute;
top: 0px;
left: 15%;
width: 70%;
min-height: 100%;
border: 1px solid black;
}
#header{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
}
#contain{
position: relative;
top: 40px;
padding-top: 20px;
left: 5%;
width: 90%;
min-height: 600px;
border:1px solid green;
}
#footer{
width: 100%;
height: 5%;
bottom: 0;
border-top: 1px dotted black;
position: absolute;
}
As you can see the contain div has a min height of 600px. This expands correctly when the page fills but it expands out past the footer and out of the "main" div.
Obviously I want the footer to remain at the bottom of the main at all times, but the main just doesn't expand according the the contain div even though it has a min height of 100% of the page.
Set your #bottom div as relative with static-height like 50px or 100px and remove #main min-height.
#main {
position: absolute;
top: 0px;
left: 15%;
width: 70%;
border: 1px solid black;
}
#contain {
position: relative;
left: 5%;
width: 90%;
border: 1px solid green;
/* min-height: 1000px; yes, its work if you need that */
}
#footer {
width: 100%;
height: 50px;
bottom: 0;
border-top: 1px dotted black;
margin-top: 10px;
position: relative;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.