如何配置一個子div只顯示滾動條，當父div分配百分比設置要求時

我正在處理一個非常標準的（或者我以爲）頁面。我想要做的是讓頁面的寬度由我在css中定義的<body>標記和頂層.page風格決定。我的網站有一個左側導航窗格，總是有一定的寬度。「內容」區域與頁面一起延伸，並應由消耗用戶屏幕的剩餘空間決定。如何配置一個子div只顯示滾動條，當父div分配百分比設置要求時

我想顯示滾動條的內容不「保持和平」與我的浮動區域寬度。例如，我最近遇到了一系列需要顯示滾動條的子元素，以防止頁面延伸到永遠。

這裏的東西怎麼看時，不需要滾動條簡單的圖片： alt text

這裏是什麼樣子時，我的子內容比網頁寬度，如： alt text

我當他們完成允許的空間（包括頁邊空白和填充）時，我想要在紅色部分顯示滾動條。我希望所有東西都能很好地填充在藍色部分，以便黃色和白色部分不會重疊。

我隨信附上了我用來彌補這顯示HTML，因爲我想不出更好的方式來描述我的方法：

<html> 
<head> 
    <style type="text/css"> 
     body 
     { 
      background-color: gray;    
     } 

     .page /* page is always centered on screen */ 
     { 
      background-color: white; 
      width: 90%; 
      margin-left: auto; 
      margin-right: auto; 
      padding: 10px; 
     } 

     .nav-pane /* navigation pane is always 100px */ 
     { 
      width: 100px; 
      height: 100%; 
      background-color: green; 
     } 

     .nav-pane > div 
     { 
      width: 100px; 
     } 

     .content-pane /* content pane should size with page */ 
     { 
      background-color: yellow; 
      margin: 10px;   
     } 

     .content-pane > div /* !!! SHOULD NOT STRETCH !!! */ 
     { 
      position: relative; 
      overflow: auto; 
      background-color: blue; 
      padding: 10px; 
      margin: 10px; 
      color: white; 
     } 

     .content-pane > div > * 
     { 
      clear: both; 
     } 

     .content /* content div holds tables, images, paragraphs, etc.. */ 
     { 
      background-color: red; 
      float: left; 
      margin-bottom: 20px; 
     } 

     #small /* one is small */ 
     { 
      width: 200px; 
     } 

     #big /* one is BIG! */ 
     { 
      width: 4000px; 
     } 
    </style> 
</head> 
<body> 
    <div class="page"> 
     <table width="100%" style="border: solid black"> 
      <tr> 
       <td class="nav-pane"> 
        <div> 
         I am the nav-pane 
        </div> 
       </td> 
       <td class="content-pane"> 
        <div> 
         I am the content pane 

         <h2>I am a heading</h2> 
         <div class="content"> 
          <div id="small">Scrollbar not needed</div> 
         </div> 

         <h2>I too am a heading</h2> 
         <div class="content"> 
          <div id="big">I require a scroll bar to keep this page pretty... :(</div> 
         </div> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

是什麼，我想連做可能不使用JavaScript？

預先感謝任何見解...

來源

2010-07-12 Luc

我看不到圖像，只有替代文字。 – pixeline 2010-07-12 19:46:11

添加到您的table一個table-layout: fixed造型應該達到什麼樣的，我相信你是想。添加它內聯（像你已經這樣做）或作爲你的CSS的一部分（我會考慮更好的方式）。

說明：您的問題存在於事實div處於table，默認情況下表格單元格擴展以適應其內容。通過使用table-layout屬性設置表以使其保持固定大小可防止表增大大小。當然，來自它的滾動條實際上將在table上，而不是div。

來源

2010-07-12 19:51:45 ScottS

你釘了它！感謝斯科特！ :) – Luc 2010-07-13 02:18:10

如何配置一個子div只顯示滾動條，當父div分配百分比設置要求時

回答

相關問題