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>

截屏：

在此处输入图像描述

4

3 回答 3

2

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

编辑：澄清示例：

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

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

于 2013-02-28T19:12:05.053 回答
0

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

于 2013-02-28T19:12:57.450 回答
0

我认为您想准确确定页面的高度和宽度。我以前曾问过类似的问题。看看：如何在 Opera 12 中查找页面宽度（适用于桌面 Windows）？

我做了同样的 RnD 并得出了结果

于 2013-02-28T19:34:33.930 回答