如何使用div/css創建兩幀水平平鋪框架集的行爲？

我試圖制定出一個網頁是這樣的：如何使用div/css創建兩幀水平平鋪框架集的行爲？

|-----------------------| 
| header (fixed)  | <- no scroll bar 
|-----------------------| 
| body    | | 
|      | | 
|      | | <- scroll bar 
|      | | 
|      | | 
|      | | 
|      | | 
| ... continues ... | | 
| ... so requires ... | | 
| ... scroll bar ... | | 
|---------------------|-|

在舊舊的日子裏，我想有一個框架做到了這一點。我不想因爲幾個原因走這條路線（包括它被棄用）。

在不那麼古老的日子裏，我想我已經做了這個使用高度= 100％的表，兩行作爲整個頁面的主體，溢出風格設置隱藏/自動在不同的地方得到最下面一行是主頁面內容的滾動條。我可以用這個解決方案，但我不記得如何正確設置它（我很確定它涉及到將正確的頁面元素設置爲定位：相對或其他東西，但我一直在撞我的頭在鍵盤上兩個小時試圖讓它工作，所以我放棄了）。

我讀過聲稱，任何你可以用幀/表你可以用正確的div和css做的事，所以我真的很想看到有人告訴我，解決方案。

另外請注意：我只希望需要基於內容時滾動條顯示（根據溢出：自動）無時無刻不在（溢出：滾動）。

來源

2011-12-31 Chuck Wilbur

答案就在你的ASCII藝術圖。 – BoltClock 2011-12-31 05:59:06

這是一個完全可行的解決方案，用於在絕對定位的標題下瀏覽問題的滾動內容，而瀏覽器窗口上沒有其他滾動條。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Scrollable 100% high element</title> 
<style type="text/css"> 
* {margin:0;padding:0} 
p{margin:0 0 1em 0} 
html,body{margin:0;padding:0} 
body{ 
    height:100%; 
} 
html>body{ 
    position:absolute; 
    width:100%; 
} 
#content{ 
    background:#d2da9c; 
    overflow:auto; 
    position:absolute; 
    width:100%; 

    left:0; 
    top:100px; 
    bottom:0; 
} 

#top{ 
    position:absolute; 
    left:0; 
    width:100%; 
    top:0px; 
    height:100px; 
    background:red; 
    overflow:hidden; 
} 
</style> 
</head> 
<body> 
<div id="wrap"> 
    <div id="content"> 
     <p>Start</p> 
     <p>test</p> 
     <p>test</p> 
    </div> 
</div> 
<div id="top"> 
    <h1>Header</h1> 
</div> 
</body> 
</html>

來源

2011-12-31 06:41:46 MadScientist

去與這個（沒有「包裝」的div我的猜測是從其他的解決辦法吃剩的），但理想的解決方案將允許頭部區域改變尺寸根據內容而定。我原本以爲根據用戶在某些動態菜單上的選擇，標題需要變得越來越小，但客戶對固定大小的解決方案感到滿意（並且它可能更好，因爲它可以保持內容區域的頂部邊緣不會跳來跳去。 ..） – 2011-12-31 22:41:28

這是簡單的方式做一個固定的頭，當你想要做一個固定的頁腳以及它變得有點複雜。這應該適合你。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
    body{ 
     margin:0; 
     padding:0; 
     position:relative; 
    } 
    body, html, #wrapper { 
     height:100%; 
     position:relative; 
    } 
    #header{ 
     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:100px; 
     background-color:yellow 
    } 
    #wrapper { 
     height:100%; 
     padding-top:100px; 
    } 
    #content{ 
     overflow:auto; 
     height:100%; 
    } 

    </style> 
    </head> 
    <body> 
    <div id="header"> header </div> 
    <div id="wrapper"> 
     <div id="content"> 
      <p>content </p> 

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

這個稍微好一點，我們只需要擺脫底部的間距即可完全移除最右側的滾動條。

來源

2011-12-31 06:02:09 MadScientist

您可以根據需要在內容div上放置邊距和填充以放置標題 – MadScientist 2011-12-31 06:02:57

'position：absolute'應顯示爲'position：fixed'。 – BoltClock 2011-12-31 06:04:51

我嘗試了一些與此類似的東西，我認爲這會有同樣的問題。請注意，在我的ASCII圖表中，滾動條停在標題區域的底部。使用絕對定位的標題，滾動條仍然會一直延伸到瀏覽器窗口，即使它只滾動身體區域。這對於客戶（也就是我的妻子）來說是不能接受的;） – 2011-12-31 06:09:49

如何使用div/css創建兩幀水平平鋪框架集的行爲？

回答

相關問題