100％div高度

我在设计一个流体布局的网页。我想保持100％的宽度和100％的高度。问题是我不知道如何保持在他们的父div，“包装”100％身高的div“左”和“右”。

<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>

请帮忙。

从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>

来源

2010-01-25 Q_Mlilo

如果您在联属网站doctype.com上提问，您可能会有更好的回答机会 – Spoike 2010-01-25 08:21:45

如果我理解正确的话，你要浮动div的右侧和左侧的包装DIV中，但保留包装div的全高度屏幕？

如果是这样，右边和左边div当然会进入包装，并使用{... float：left; position：relative;}和{... float：right; position：relative;}将它们浮动到两边。

现在，因为您已经将这两个div包含在您的包装div的内容中，所以包装本身的高度可能为零。这是因为里面的两个div“浮出来”。为了让您的包装相同高度的两个div里面有，你可以：

将这个作为你的包装内第三格：<div style="clear: both;"></div> 或
把任何元素的包装里面的两个div后（像一个跨度），并给它一个CSS属性{... clear：both;}

现在你已经“清除浮动”，你的包装有两个div的全部高度。

如果使用其他手势，您希望您的所有内容都可以伸展到屏幕的整个高度，而不必考虑您在屏幕上放置的内容，那么您需要做一些CSS魔术，它会变得太复杂没有看到你的代码解释。从这里开始：http://ryanfait.com/sticky-footer/

希望有所帮助。

来源

2010-01-25 09:29:44 Tom

感谢您的链接，非常有用！ – Lucius 2011-02-04 10:07:48

@Lucius：不客气......长久以来一直使用它，从来没有遇到过问题。 – Tom 2011-02-04 12:36:40

尝试添加

最小高度：100％;到你的css，chk out this示例

来源

2010-01-25 08:23:01 ant

所有浏览器都不支持“min-height” – poke 2010-01-25 08:24:15

那么我给了他例子..他可以看到所有的东西完成他的目标，他会造成身高。他会得到相同的结果 – ant 2010-01-25 08:27:25

@poke：IE6仍然被认为是相关的，除非另有规定？ – Anonymous 2010-01-25 08:31:35

要有100％浏览器高度的div，父级也需要100％的高度。尝试添加下面的CSS：

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

来源

2010-01-25 08:23:41 poke

我已经得到了该代码。我的主div（“容器”）没问题，它有100％的高度。我的标题有100px的高度 - 我希望div“包装器”及其子项（“左”和“右”）适合剩余的屏幕视图。 – 2010-01-25 08:31:51

如果您在同级别的所有元素是100％的宽度和高度，你会得到浏览器之间的意外行为。通过你给出的例子，你试图给父母的所有空间header和wrapper。

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

这应该是怎么回事？有这样做的几种方法之一：

第一要素得到所有的空间，或者
都有重叠或
它们共用空间

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

顺便问一下你有没有试过float ing你的元素？

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

来源

2010-01-25 08:28:36 Spoike

我已经编辑了一些逻辑来达到我想达到的目的。 – 2010-01-25 08:36:24

100％div高度

回答

相关问题