我有一個具有頁眉,正文和頁腳的面板,即使面板主體中的內容溢出,該面板也需要填充屏幕(或其父容器).如果它確實溢出,那么身體將滾動.頁眉和頁腳高度是動態的,因為它們可能會隨著不同的視圖端口尺寸而變化,因此我無法對面板主體高度或填充進行硬編碼以考慮頁眉/頁腳.

換句話說,我想要的是讓帶有標題,正文和頁腳的面板填滿屏幕,這樣就沒有頁面滾動條.即使主體內容的高度較小,面板也應始終具有100％的屏幕/容器高度.如果面板主體內容具有更高的高度,則面板主體應滾動而不是整個頁面.

這是我的問題的一個jsfiddle例子.如果您取消注釋javascript,您將看到我想要發生的事情.我不想使用javascript,雖然CSS3功能很好.

這是基本的HTML結構：

A heading with a dynamic height

A footer with a dynamic height

最佳答案 您可以使用css table table-row table-cell,面板主體的高度為100％,將面板標題和頁腳推到最小高度.

并在面板主體中為滾動部分添加另一個div.html, body {

height: 100%;

margin: 0;

}

.panel {

display: table;

height: 100%;

width: 100%;

}

.panel > div {

display: table-row;

}

.panel > div > div {

display: table-cell;

border: 1px solid red;

}

.panel .panel-body > div {

height: 100%;

position: relative;

}

.panel-body > div > div {

overflow: auto;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

A heading with a dynamic height

May be a lot or little content

A footer with a dynamic height

總結

以上是生活随笔為你收集整理的html制作主体部分,html – 使用CSS制作具有动态面板主体高度的面板填充父容器高度的其余部分...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。