是否有可能在上面有可滾動內容區域的自動高度div頁腳？

我想創建一個容器，它有兩個部分 - 頂部將是一個滾動div，佔據其容器的垂直高度的100％，減去粘性頁腳的高度。粘性頁腳不能有硬編碼的高度（因爲它將以兩種不同高度的兩種模式工作），這是我困擾的地方。我寧願不使用js，只有可能時才使用css。是否有可能在上面有可滾動內容區域的自動高度div頁腳？

HTML

<div class="container"> 
    <div class="scrollArea"> 
     a<br/>b<br/>c<br/>d<br/> 
     a<br/>b<br/>c<br/>d<br/> 
     a<br/>b<br/>c<br/>d<br/> 
     a<br/>b<br/>c<br/>d<br/> 
    </div> 
    <div class="footer"> 
     <!-- the contents of the footer will determine the height needed --> 
    </div> 
</div>

CSS

.container { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

.scrollArea { 
    position: absolute; 
    top: 0px; 
    bottom [height of sticky footer]; left: 0px; 
    right: 0px; 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

.footer { 
    position: absolute; 
    bottom: 0px; 
    height: [height of sticky footer]; 
    left: 0px; 
    right: 0px; 
}

來源

2013-10-04 Rob

可能重複的[Flexbox的和垂直滾動使用的較新的API Flexbox的全高的應用]（HTTP：//計算器。COM /問題/ 14962468/Flexbox的-和垂直滾動功能於一個全高-APP-使用 - 新 - Flexbox的-API） – cimmanon

你不想對一切使用position: absolute;。這將使它很難風格的東西，因爲一個絕對元素技術上沒有高度（從其他元素的角度來看）。通過使用底部，左側，頂部和右側全部爲0的「拉伸技術」，您會進一步混淆事物。

您的問題在高度將如何設置方面也有點混淆。是否是通過JavaScript設置？通過媒體查詢？如果出現這種情況，您可以通過相同的方法輕鬆設置滾動區域的高度，從而允許它們一起改變。

如果出於某種原因只需設置此元素的高度，則可以讓css table display屬性完成計算滾動區域的新高度的工作，方法是將容器設置爲display: table;，然後添加另一個圍繞Scrollarea的包裝。將封裝器和頁腳設置爲display: table-row;將使它們佈局。

看看這個，看看我的意思是：

http://jsfiddle.net/6gprU/3/

您的代碼示例表明高度將設置，不知爲什麼...但如果不是這種情況，你絕對不能設置高度（如果進入頁腳的內容是動態和不可預測的大小，則會出現這種情況），那麼您正在變得越來越困難。在這種情況下，這取決於整個容器高度是否需要保持一定的大小。如果是這樣，就像我想的那樣，那麼你可能需要重新考慮你的佈局，因爲你有太多的變量可以用純CSS來做。

作爲最後補充，是另一個選項，這將使這很容易。 CSS有一個名爲calc()特點：

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

此功能可以讓你在CSS進行計算，就如您在JavaScript，並允許你在關係設置的任何高度的任何東西，動態的。不過，由於瀏覽器支持有限，我放棄了這一點。它不能在IE 8或以下版本中使用。

查看本網站，看看它會在哪裏工作，然後作出決定，這是否是您的有效選擇。的

http://caniuse.com/calc

來源

2013-10-04 20:57:06

是否有可能在上面有可滾動內容區域的自動高度div頁腳？

回答

相關問題