Html CSS-Span将页面的整个高度分隔开_Html_Css

Html CSS-Span将页面的整个高度分隔开

html css

Html CSS-Span将页面的整个高度分隔开,html,css,Html,Css,我对我的div进行了编码，使它们（几乎）看起来很完美。正确的div相互上方/下方，并横跨页面的整个宽度。我发现它并没有覆盖整个页面的高度。任何建议都将不胜感激！此外，我还有一个水平滚动条，我很想离开它。：） CSS: body { color: #333; font-size: 11px; font-family: "Myriad Pro", Arial, Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans,

我对我的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%;
}

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

HTML:

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%;
}

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

HTML:


登记

截图：

您已经明确地为每个容器指定了

高度

，获得（视觉上）全高的唯一方法是将所有东西封装在高度为100%或类似的包装中

编辑：澄清示例：

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

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

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

我认为您需要准确确定页面的高度和宽度。我以前也问过类似的问题。看看：

我同样做了RnD，并提出了CSS的第一个提示：不要混合匹配内联和外部CSS。调试是一件痛苦的事情，而且会导致代码混乱。你有一个容器16的CSS定义，但是你在那个分区上也有一个内联样式。谢谢-我忘了我把它放在那里了。：）我已经删除了它，正在更新上面的代码。如果我更改代码以反映身体和容器16中100%的高度，那么容器16将完全从视图中消失。我之前已经尝试过了-它也无法修复它。（与我上面概述的结果相同）。澄清一下-包装器的高度为100%，容器16的最小高度为100%，在本例中不需要Javascript。我认为这是一个低效的建议。我一定是误解了这个问题。