顯示錶html混淆

所以我試圖建立一個基本的東西佈局：一個頭，有一個固定的大小;和內容，只允許與頁面一樣大 - 任何溢出都應該在內部滾動。顯示錶html混淆

我似乎無法得到內部股利只滾動和溢出留下來。

CSS：

body { 
    display:table; 
    width: 100%; 
}   
#content-body,#header { 
    display:table-row; 
} 

#content { 
    text-align: center; 
    height: 100%; 
    width: 50%; 
    overflow-y: scroll; 
    background-color: red; 
}

HTML：

<body> 
    <div id="header"> 
     header here 
    </div> 

    <div id="content-body"> 
      <div id="content"> 
      <-- Need this to scroll --> 
      </div> 

     </div> 
    </div> 
</body>

的JSFiddle

我只希望得到這個工作只用CSS和HTML

有人請幫助我！我有點困惑，爲什麼這不起作用

來源

2013-10-02 dbarnes

'顯示：table'是一個徹底的錯誤的方式來做到這一點。使用'position：absolute'並拉伸內容。 – SLaks

你知道你的頭部有多高，還是靈活/變化的高度？ –

標題是一個不變的高度，但內容div需要100％ - 標題高度 – dbarnes

你根本不需要display: table，這不會爲你做詭計。

你既然知道了標題的高度，你真正需要做的就是給#content一個position: absolute（如果它不是包裹在任何一個relative位置，這是相對於body標籤默認情況下）。

#content { 
    position: absolute; 
    top: 150px; /* or whatever your header height is */ 
    bottom: 0; 
}

見我的jsfiddle例如：然後，你可以從那裏需要啓動（頭的底部）一路底部做這個伸展它http://jsfiddle.net/W43UV/5/

（我設定的填充和在body到0的保證金，以防止top偏移搞砸）

來源

2013-10-02 21:30:57

以下是可能不完全適合您的問題的替代解決方案，但在類似情況下它有時也很有用：http://jsfiddle.net/W43UV/6/。它依賴於瀏覽器的滾動條，而不是在div上添加一個滾動條，但它與你所要求的大致相同。不知道這是否有用，但你永遠不知道。 –

嗯我忘了添加，身體必須有餘量：0自動;似乎不適用於此規則，因爲現在內容沒有正確的邊距 – dbarnes

只要頂部和底部爲0（您也有），這應該不成問題。 –

嘗試是這樣的：

sandbox.css：

#header { 
    width: 100%; 
    height: 40px; 
    background-color: #ff4200; 
} 
#content-body { 
    width: 100%; 
} 
#content { 
    width: 100%; 
    height: 40px; 
    overflow-y: scroll; 
    background-color: #0042ff; 
}

sandbox.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="sandbox.css"> 
    </head> 
    <body> 
     <div id="header"> 
      header here 
     </div> 
     <div id="content-body"> 
      <div id="content"> 
       <-- Need this to scroll --> 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-10-02 22:03:52 chrishasbrouck

將'＃content'設置爲'height：40px'，這將如何延伸至屏幕底部？ –

＃內容高度無法修復 – dbarnes

顯示錶html混淆

回答

相關問題