用高度固定的位置

我正在尋找一種方法來確保可滾動，固定元素的高度適應所有空白直到頁腳。用高度固定的位置

請參閱以下fiddle這是我正在處理的佈局。

被卡住了2天，這是時候繼續前進。

更好地看到Firefox中的小提琴，側欄滾動條由於某種原因不滾動鉻，但這是一個不同的問題。

<header></header> 
<div id="platformContainer"> 

    <section id="platformContent"> 
     <div id="platformBody">   
      <ul class="mainList"> 
       ...     
      </ul> 
     </div> 
    </section> 

    <section id="toolBarContainer"> 
    <div id="toolBarContent"> 
     <ul id="toolBarList"> 
      ... 
     </ul> 
    </div> 
</section> 

<footer></footer>

來源

2013-02-22 parliament

我想你可能需要JavaScript才能做到這一點 – 9edge 2013-02-22 08:57:35

我不知道我正確理解你的問題。在#toolBarList上設置'height：100％'而不是'height：200px'並沒有訣竅？ – 2013-02-22 09:03:41

@HugoGiraudel理想情況下，我可以做到這一點，但它需要窗口高度，如果你一直向下滾動列表項溢出到頁腳。我需要它只能走到頁腳。 – parliament 2013-02-22 09:05:49

假設你想要的toolBarList容器100％的高度 - 這是你已經有了。側邊欄是 100％的高度。在列表中，但是，僅設定在200像素：

#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{ 
    height: 200px; 
    ... 
}

更改，要height:100%;使得它填補了文檔的整個高度。現在的問題是考慮到頁眉和頁腳。然而，這是一個常見問題，我自己在這裏回答了這個問題：https://stackoverflow.com/a/14892331/1317805和其他許多人一樣。您需要確保頁眉和頁腳未被隱藏或覆蓋內容區域。

我想你可能需要JavaScript才能做到這一點 - 9edge

不會！

使用該元素是不被認爲是概述了需要被一種特定的方式直觀地稱呼內容：

另外，請使用section標籤時要注意。如果是這種情況，最好建議作者使用語義上中性的div。

您的#platformContent和#toolBarContainer樣式可能會產生意想不到的結果。

http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements

其實，你的這些部分的造型可以完全替換爲：

#platformBody, #toolBarContent { 
    position:relative; 
    height:100%; 
    top: 70px; 
    width: 100%; 
}

來源

2013-02-22 09:09:23

謝謝，我會改變爲divs，但負邊界底部不解決問題。我的側邊欄位置是：固定的，不應隨主要內容一起滾動。 – parliament 2013-02-22 09:19:02

在Chrome中，您的側邊欄*不會與主要內容一起滾動。請參閱http://jsfiddle.net/27U5n/1/ – 2013-02-22 09:27:08

我知道我在我的問題中提到過關於Chrome的問題。如果你清楚說明，你只需將小腳在小提琴中取出：左後衛你會看到問題。 – parliament 2013-02-22 09:30:27

用高度固定的位置

回答

相關問題