设置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高度父

回答

相关问题