設置DIV高度父

的100％，我想下面的佈局我的網頁：設置DIV高度父

|   header  | 
| navigation | details | 
|   |   |

凡導航窗格（動態生成的內容）包含了數百個元素。我想在導航窗格上創建一個垂直滾動條，使窗格的窗口高度減去標題的高度。

我的頁面大致具有以下結構：

<div id=header></div> 
<div id=content> 
    <div id=navigation></div> 
    <div id=details></div> 
</div>

用下面的CSS：

#navigation { 
    float: left; 
    width: 400px; 
    height: 100%; 
    overflow: auto; 
} 

#details { 
    margin-left: 420px; 
}

這主要工作除了導航窗格中獲得窗口的高度的100％，不窗口高度的100％減去標題的高度。我寧願不明確地設置標題的高度，如果我能避免它。我對網絡開發完全陌生，所以我不介意做一些閱讀。我需要做什麼來實現我想要的佈局？

來源

2009-11-03 Nate

嘗試使用'溢出：scroll'的導航儀。另外，你是否看到標題或者內容佔據了它的空間呢？ – NawaMan 2009-11-03 01:59:54

溢出：滾動給出相同的效果。我可以看到標題，但滾動條似乎是整個窗口的高度，而不是導航div的高度。 – Nate 2009-11-03 02:19:17

我嘗試了一些不同的設置，似乎無法幫助您。也許，這是桌子更適合的情況之一。只是一個想法。 – NawaMan 2009-11-03 02:54:41

您必須確保您的身體標記和內容容器也具有100％的高度。您必須明確地設置子元素的高度才能服從。

body { 
    height: 100%; 
} 

#content { 
    height: 100%; 
}

但是，這並不考慮標頭的位置。以下職位演示利用由達斯汀·迪亞茲和內容容器上的負利潤率的最小高度快速黑客的技術，實現100％的高度，而不是用頭干擾：

http://www.thechoppr.com/blog/2009/02/08/3-column-fluid-layout-100-height/

來源

2009-11-03 01:47:57

設置正文和內容元素的高度似乎沒有幫助。「它不考慮標題的位置」是什麼意思？ – Nate 2009-11-03 01:53:07

你說「我d而不是明確地設置標題的高度，如果我可以避免它。「我敢肯定，如果不切換到表格，你無法避免它。這就是說，這裏是如何使用與頭部的高度的div設置爲50像素它做一個例子：

<html> 
    <head> 
     <style type="text/css"> 
      html, body { 
       margin:0; 
      } 

      div#content { 
       position:absolute; 
       top:0px; 
       z-index:-1; 
       width:100%; 
      } 

      html, body, div#content, div#navigation-shell, div#details-shell { 
       height:100%; 
      } 

      div#header { 
       height:50px; 
      } 

      div#navigation-shell { 
       float:left; 
       width:400px; 
      } 

      div#navigation, div#details{ 
       padding-top:50px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"></div> 
     <div id="content"> 
      <div id="navigation-shell"> 
       <div id="navigation"></div> 
      </div> 
      <div id="details-shell">     
       <div id="details"></div> 
      </div> 
     </div> 
    </body> 
</html>

一個注意：如果你想背景添加到navigation和/或details領域，你將不得不將它們應用到它們各自的shell div中。但是，所有的實際內容都會在內部分區中進行。

來源

2009-11-03 06:45:46 sfarbota

我說我寧願不設置標題的高度，因爲我不想知道它。我目前的頁面標題只有50pt左右的文字，但我可能會在稍後用圖片替換它。我希望每次更改標題時都不需要修改導航div的高度/填充屬性。 – Nate 2009-11-03 15:53:52

我可以理解這一點。但是，固定高度將有助於在所有瀏覽器中保持一致的頁面佈局。當你改變它的內容時，改變標題的高度可能是一種痛苦，但是一旦你解決了你喜歡的標題，你就不必再擔心它了。這當然都取決於你，但我相當肯定，如果沒有這個bug，一個自動調整大小的頭部div與下面的2個全屏div是不可能的。 – sfarbota 2009-11-03 16:09:25

你必須HTML和車身高度設置爲100％：html, body {height: 100%;}

來源

2011-12-19 21:25:43 ksindi

設置DIV高度父

回答

相關問題