CSS 中 DIV 和 100% 高度的奇怪行为答案

【问题标题】：Strange Behavior With DIVs and 100% Height in CSSCSS 中 DIV 和 100% 高度的奇怪行为
【发布时间】：2011-06-22 09:15:09
【问题描述】：

一个看似微不足道的问题。

我在 Visual Studio 2010 中有一个非常基本的页面。它有一个母版页...

<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
        </div>
    </form>
</body>

...与...

<div class="divStretch" />

...单独在内容中。

CSS 是：

body, form, html
{
    background-color: Black;
    height: 100%;
}

body
{
    margin: auto;
}

.divStretch
{
    background-color: Red;
    height: 100%;
}

现在在 ContentPlaceHolder 周围加上<div> 标签后，整个页面都是黑色的。也就是说，内容 div 不显示。没有<div>标签，红色到处都是，内容div的高度大约是窗口高度的两倍，导致出现垂直滚动条。

我只想让内容 div 完全填满窗口。

【问题讨论】：

什么浏览器，您使用的是 DOCTYPE？
IE9 和 Chrome 12。ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
也许我只是不了解您网站的标记，但我无法复制您遇到的问题。 jsfiddle.net/jzuNg

标签： css html height master

【解决方案1】：

因为我是新来的，所以我不允许在您的问题中添加 cmets - 对此感到抱歉！我会尽力回答你的问题，并会假设一些事情。如果我的假设有误，我会编辑答案。

我假设你在最后提到的“内容 div”，你指的是表单内部的 div，当你说你希望它完全填充你所指的窗口时高度（如果您想在此示例中填充宽度，只需添加宽度：100%）

我想出了什么：http://jsfiddle.net/trev/3xuzZ/

我使用了以下 CSS：

身体 { 边距：0px；填充：0px；背景：黑色； } .contentDiv { 位置：固定；顶部：0px；底部：0px；背景：红色； }

还有以下 HTML：

<body>
<form>
    <div class="contentDiv">
        <input type="text" /> <br />
        <input type="text" /> <br />
        <input type="text" /> <br />
        <input type="text" /> <br />
        <input type="submit" value="Button!" />
    </div>
</form> 
</body>

不过，这将占据整个浏览器窗口，覆盖您在页面上可能拥有的任何其他元素，我不确定这是否是您想要的。

【讨论】：

JSFIDDLE 是一个很棒的工具。你的 CSS 为我指明了正确的方向。
一个小问题。因为位置是固定的，所以这个 div 浮动在母版页中的父 div 之外。如果我要对父 div 应用边距，我必须在 contentDiv 的 CSS 中重复此操作以使我的网站保持一致。有没有办法在没有固定位置的情况下实现同样的行为？
我在这里考虑相对定位和绝对定位。给我一点时间，我不知道你的网站是如何布局的，但也许可以尝试使父 div 为“位置：相对”并将位置从“固定”更改为“绝对”。编辑：您的网站有滚动条吗？或者它是否意味着它在一个页面上（例如grooveshark）。
@S. Valmont 我不知道没有固定定位的方法，您可能需要更改站点当前的布局方式。这是我想出的here - JSFIDDLE LINK