CSS中div和100%高度的奇怪行为_Css_Html_Height_Master

CSS中div和100%高度的奇怪行为

css html

CSS中div和100%高度的奇怪行为,css,html,height,master,Css,Html,Height,Master,看似微不足道的问题我在VisualStudio2010中有一个非常基本的页面。它有一个母版页 <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" /> </div> </form> &l

看似微不足道的问题

我在VisualStudio2010中有一个非常基本的页面。它有一个母版页

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

现在，由于ContentPlaceHolder周围有标签，整个页面是黑色的。也就是说，content div不会出现。如果没有标签，到处都是红色，content div的高度大约是窗口高度的两倍，导致出现一个垂直滚动条

我只想让content div准确地填满窗口。

因为我是新来的，所以我不允许对您的问题添加评论-很抱歉！我会尽力回答你的问题，并做出一些假设。如果我的假设错误，我将编辑答案

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

我想到的是：

我使用了以下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>

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

什么浏览器，您使用的是DOCTYPE？IE9和Chrome 12。也许我只是不理解你的站点的标记是什么，但我无法复制你所遇到的问题。JSFIDLE是一个很棒的工具。你的CSS为我指明了正确的方向。一点小事。因为位置是固定的，所以该div在母版页中的父div之外浮动。如果我要对父div应用边距，我必须在contentDiv的CSS中重复这一点，以使我的网站保持一致。有没有一种方法可以在没有固定位置的情况下实现同样的行为？我在考虑相对和绝对位置。给我一点时间，因为我搞砸了，我不知道你的网站是如何布局的，但也许可以尝试使父div的位置：相对和改变的立场，从'固定'到'绝对'。编辑：你的网站有滚动条吗？或者像grooveshark这样的单页应用程序。@S.Valmont我不知道没有固定定位的方法，您可能需要更改站点当前的布局方式。这是我想到的 body { margin: 0px; padding: 0px; background: black; } .contentDiv { position: fixed; top: 0px; bottom: 0px; background: red; }

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