logo标签列表

CSS - 让 div 占据整个页面的高度

htmlcss
3
我已经编写了我的div，使它们（几乎）完美地显示出来。正确的div在彼此上下方，并且跨越整个页面的宽度。但我发现它没有跨越整个页面的高度。希望能得到任何建议！另外，我有一个横向滚动条，希望它消失。 :) CSS: 
body {
  color: #333;
  font-size: 11px;
    font-family: "Myriad Pro", Arial, Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
  position: relative;
}

.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  margin-top:0px;
  padding-top:0px;
      min-height:800px; 
    background-image:url(../images/Content_bkg.gif);
        box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    height: 60px;
    margin: 0px;
    padding: 0px;
    border: 1px solid rgb(71, 89, 32);
    box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    position:relative;
    width:100%;
}

HTML:

<body>
       <div class="container_24">
            <div class="grid_16">
                <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
            </div>
       </div>
       <div class="container_16">
            <form id="form1" runat="server">
                <asp:ContentPlaceHolder ID="Body" runat="server">

                </asp:ContentPlaceHolder>
            </form>
       </div>
       <div class="container_24"></div>

</body>

更新： 以下是使用下面提供的包装器概念的代码示例。

.wrapper{
    height:100%;
}

.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  margin-top:0px;
  padding-top:0px;
    background-image:url(../images/Content_bkg.gif);
        box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    height: 60px;
    margin: 0px;
    padding: 0px;
    border: 1px solid rgb(71, 89, 32);
    box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    position:relative;
    width:100%;
}

HTML:

<body>
    <div class="wrapper">
       <div class="container_24">
            <div class="grid_16">
                <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
            </div>
       </div>
       <div class="container_16">
            <form id="form1" runat="server">
                <asp:ContentPlaceHolder ID="Body" runat="server">

                </asp:ContentPlaceHolder>
            </form>
       </div>
       <div class="container_24"></div>
        </div>
</body>

截图： enter image description here
1
CSS的第一个提示：不要混合使用内联和外部CSS。这样会很难调试，代码也会变得混乱。你有一个CSS定义container_16，但是你也在那个div上使用了内联样式。 - Jeff B
谢谢 - 我甚至忘记我放了那个。 :) 我已经将其删除并更新了上面的代码。 - Yecats
3个回答
3

你已经为每个容器显式地指定了 height，要想 (在视觉上) 达到完全高度的唯一方法是将所有内容都包含在一个具有 height: 100% 或类似属性的包装器中。

编辑：澄清示例:

<body>
  <div id="wrapper">
     <!--Your stuff here-->
  </div>
</body>

在上面的例子中，包装器获得了100％的高度，而不是内容。
如果我将代码更改为在body和容器16中反映100％的高度，则容器16将完全从视图中消失。 - Yecats
我之前尝试过了 - 它也没有解决问题（与我上面概述的结果相同）。为了澄清 - 包装器高度为100％，容器16的最小高度为100％。 - Yecats
0
你可能想使用JavaScript来获取页面的高度。然后根据容器进行一些数学计算，以获得正确的容器与高度比例，以填充页面。
在这种情况下不需要使用Javascript。我认为这是一个低效的建议。 - Axel
那我一定是误解了问题。 - Jay D.
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接