[英]Div height is not extending to bottom of page
我正在開發的網站的頁面布局如下所示:
-------------------------------------Top Bar-------------------------------------
| |
---------------------------------------------------------------------------------
--------Content (Has a dark filter that goes over the main background image)-----
------------ Main Content---------------------------|-------------SideBar--------
| | |
| | |
| | |
| | |
| | |
| | |
| | |
---------------------------------------------------------------------------------
我頁面中的通常是一張照片,出於設計目的,我需要應用深色濾鏡。 因此,我創建了一個用於該目的的.content類,所有內容(頂部欄除外)都位於其中。
我的問題是,當.main-content容器中的內容超過頁面高度時,篩選器不會到達頁面底部。 我的內容高度為100%,還有正文和html標簽。
html {
font-size: 16px;
height:100%;
overflow:auto;
}
body {
font-size: 62.5%;
/*10px = 1em*/
line-height: 1.4;
width:100%;
height: 100%;
min-height: 100%;
overflow: auto;
}
.top-bar {
width:100%;
height:58px;
position:fixed;
top:0px;
z-index: 5;
}
.top-bar.user {
background-color:rgba(0, 0, 0, 1);
font-size: 1.2em;
}
.content {
display: block;
margin-top: 58px;
/* = top bar height*/
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.main-content {
float: left;
width: 75%;
height: 100%;
}
.sidebar {
position: fixed;
right: 0;
width: 25%;
height: 100%;
}
我試圖在此處創建問題: http : //jsfiddle.net/apGgd/3/
您是否已看到,隨着表格的擴展,過濾器(灰色背景)並未隨之移動。 但是,如果您從.content中刪除“ height:100%”,則問題將消失。
它起作用的原因是當您刪除height:100%
是因為您不需要顯式聲明它。 你想要的是height:auto; min-height:100%;
height:auto; min-height:100%;
。 這將確保高度至少為100%,但會根據需要填充表格,我認為這是您想要的行為。
您只需刪除身高:100%; 從.content部分開始,並添加一個overflow:show;(如果以前的方法不起作用)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.