[英]How to make a page expand with content HTML/CSS?
Basically my page consists of 基本上我的页面包括
a) a main div, #main b) a header, #header c) a div, #contain d) a footer, #footer a)主div,#main b)标头,#header c)div,#包含d)页脚,#footer
The content of the page goes into the contain div. 页面内容进入包含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. 如您所见,contain div的最小高度为600px。 This expands correctly when the page fills but it expands out past the footer and out of the "main" div.
当页面填满时,它可以正确展开,但它会超出页脚并超出“主要” 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. 显然,我希望页脚始终保持在主页面的底部,但是即使主页面的最小高度为页面的100%,主页面也不会根据包含div进行扩展。
Set your #bottom div as relative with static-height like 50px or 100px and remove #main min-height. 将您的#bottom div设置为具有50px或100px之类的static-height相对值,并删除#main min-height。
http://jsfiddle.net/JH2q9/3/ http://jsfiddle.net/JH2q9/3/
#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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.