![](/img/trans.png)
[英]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.