使用div填充剩餘的動態高度並滾動不使用javascript

我有一個文檔結構，它將頁眉保留在頁面頂部，底部保留頁腳。只要中間的內容小於窗口的高度，它就工作得很好。如果內容太長，頁腳會進一步向下推動並顯示完整的主體滾動條。我怎樣才能讓滾動條被限制在內容DIV中。使用div填充剩餘的動態高度並滾動不使用javascript

請注意，頁眉和頁腳的內容不固定，因此我不知道這些元素的高度，並且無法將內容元素的頂部位置設置爲固定值。我在示例中添加了顯示/隱藏功能來演示此功能。

我想解決這個純CSS（避免使用Javascript）。我知道使用JavaScript，我可以監視窗口大小和元素可見性的變化，我可以計算頁眉和頁腳的高度，並將固定尺寸設置爲內容元素。但是，有沒有一個非JavaScript的解決方案？

http://jsfiddle.net/sA5fD/1/

html { height: 100%; } 
body {  
    padding:0 0; 
    margin:0 0; 
    height: 100%; 
} 
#main { 
    display:table; 
    height:100%; 
    width:100%; 
} 
#header, #footer { 
    display:table-row; 
    background:#88f; 
} 
#more { 
    display: none; 
} 
#content { 
    display:table-row; 
    height:100%; 
    background:#8f8; 
}

應該爲所有現代瀏覽器，臺式機，平板電腦和手機的工作。對於舊的瀏覽器，全身滾動條就可以。

來源

2014-02-28 Marc

如果添加兩個環繞塊：

<div id="content"> 
    <div id="content-scroll-wrap"> 
    <div id="content-scroll"> 
     content...

然後使用CSS：

#content-scroll-wrap { 
    position: relative; 
    height: 100%; 
} 
#content-scroll { 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
    overflow: auto; 
}

http://jsfiddle.net/sA5fD/8/

不知道在舊的瀏覽器的支持。 IE可能需要一些修復。

來源

2014-05-26 13:31:23 user

不能在IE 8的工作或9任何人都知道，不會打破瀏覽器的其餘部分修復？ – Rothrock

對於未來的用戶：

HTML

<div class="parent"> 

    <div class="child"> 
    <div class="large-element> </div> 
    </div> 

</div>

CSS

.parent { 
    height: 1000px 
    overflow-y: scroll; 
} 

.child { 
    background-color: royalblue; 
    height: auto; 
} 

.large-element { 
    height: 1200px; 
}

在這種情況下，子元素將產生溢出。由於孩子的身高設置爲自動，所以會伸出來填充容器。如果您已將其設置爲100%，則只會去1000px，留下一些空白！

這裏是筆：https://codepen.io/meteora/pen/JJYoZM

這應該工作在所有瀏覽器:)

來源

2017-06-07 15:37:05

使用div填充剩餘的動態高度並滾動不使用javascript

回答

相關問題