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