Question

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

我在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完全填满窗口。

Answer 1

因为我是新来的，所以我不允许在你的问题上添加评论 - 抱歉！我会尽力回答你的问题并假设一些事情。如果我在假设上错了，我会编辑答案。

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

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

我使用了以下CSS：

body {
    margin: 0px;
    padding: 0px;
    background: black;
}

.contentDiv {
    position: fixed;
    top: 0px;
    bottom: 0px;
    background: red;
}

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

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

使用DIV的奇怪行为和CSS中的100％高度

1 个答案: