100% div 高度

Question

100% div 高度

5

大家好

我正在设计一个具有流式布局的网页。我希望保持100%的宽度和高度。问题是我不知道如何在父元素“wrapper”内将div“left”和“right”保持100%的高度。

<div id="container" style="width:100%; height:100%">  
     <div id="header" style="width:100%; height:100px">
     </div>

     <div id="wrapper" style="width:100%; height:(100% - 100px)">
           <div id="left" style="width:250px; height:(100% - 100px)">
           </div>

           <div id="right" style="width:(100% - 250px); height:(100% - 100px)">
           </div>           
     </div>          
</div>

Please help.

Answer from doctype.com

CSS

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<body>
<div id="container" style="width:100%; height:100%; position: absolute;">  
  <div id="header" style="width:100%; height:100px;">
header
  </div>
  <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;">
    <div id="left" style="width:250px; height:100%; float:left;">
    left
    </div>
    <div id="right" style="width: 250px; height:100%; float:right; ">
    right
    </div>           
    main content
  </div>          
</div>
</body>

- Q_Mlilo

1

如果你在联盟网站doctype.com上提问，你可能会有更好的回答机会。 - Spoike

4个回答

3

如果您将同一级别的所有元素都设置为100%宽度和高度，则会在不同浏览器之间出现意外行为。根据您给出的示例，您正在尝试让header和wrapper占用父元素内的所有空间。

100% container
+----------------------------+
| 100% header  100% wrapper  |
| +----------+ +-----------+ |
| |         errr...?       | |
| +----------+ +-----------+ |
+----------------------------+

这怎么可能实现呢？有几种方法可以做到：

第一个元素占据所有的空间，或者
两个元素必须重叠，或者
它们都共享空间

所以，在给出百分比时，您需要更具体。

顺便问一下，您尝试过使用float来定位元素吗？

position: relative; // or absolute
float: left;

- Spoike

我已经进行了编辑，为我想要实现的内容添加了一些逻辑。 - Q_Mlilo

2

要使一个div的高度达到浏览器的100%，其父元素也需要有100%的高度。可以尝试添加以下CSS代码：

html, body { height: 100%; margin: 0; padding: 0; }

- poke

我已经有了那段代码。我的主div（“container”）没问题，它的高度是100％。我的页眉高度为100像素 - 我希望div“wrapper”及其子元素（“left”和“right”）适应剩余的屏幕视图。 - Q_Mlilo

0

尝试在你的CSS中添加min-height:100%;，查看this的示例。

- ant

2

min-height 并不被所有浏览器很好地支持。 - poke

我给他举了例子，他可以看到如何实现他的目标，但他却引发了高度的问题，结果会是相同的。 - ant

@poke：除非另有说明，否则是否仍然认为IE6是相关的？ - Anonymous

获取母div的100%高度并不是问题。问题在于如何让左右两个div适应头部div下方剩余的屏幕视图。请查看http://www.yell.com/maps/MapAction.do，了解左侧内容随着变化而改变的情况。 - Q_Mlilo

如果你无法完成它，你总可以使用JavaScript获取窗口高度并将像素值设置到左侧。 - ant

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom · Accepted Answer

如果我理解正确，您想在包装器div内左右浮动div，但仍保留包装器div的全屏高度？

如果是这样，左右div当然放在包装器内，您可以使用{... float: left; position: relative;}和{... float: right; position: relative;}将它们浮动到两侧。

现在，因为您已经浮动了这两个div，这两个div属于您的包装器div内容，所以包装器本身的高度可能为零。这是因为两个div“漂浮出去”。为了使您的包装器与内部两个div具有相同的高度，您可以选择以下任一方法：

将此作为第三个div放置在包装器内：<div style="clear: both;"></div> 或者
在两个div之后在包装器中放置任何元素（如span），并给它一个CSS属性{... clear: both;}

现在您已经“清除了漂浮状态”，您的包装器就具有了内部两个div的完整高度。

另一方面，如果您想让所有内容始终拉伸到屏幕的完整高度，而不考虑您放入的内容，则需要进行一些CSS魔法，并且这会变得过于复杂，无法在不看到您的代码的情况下进行解释。请从这里开始：http://ryanfait.com/sticky-footer/

希望能有所帮助。