Question

我已经编码了我的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

Answer 1

你已经明确地给每个容器height，唯一的方法是（视觉上）全高度将所有内容都封装在一个包含height: 100%或类似

的包装器中

修改澄清示例：

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

在上面的示例中，包装器的高度为100％，而不是内容。

Answer 2

您可能希望使用javascript来获取页面的高度。然后对每个容器进行一些数学计算，以获得容器与高度的正确比率以填充页面。

Answer 3

我想你想确切地确定身高和身高。页面宽度。之前我曾问过类似的问题。看看：How to find page width in Opera 12 (for Desktop Windows)?

我做了相同的RnD，并提出了results

CSS - 跨度划分页面的整个高度

3 个答案: