0

我目前的项目需要一些认真的 CSS 帮助。我附上了我希望我的页面看起来像的屏幕截图。我遇到的问题是将 div 正确定位在彼此上，并且让宽度/高度保持 100% 的页面。我想在不使用 Javascript 的情况下做到这一点。这是我的 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>

这是我的 CSS：

.wrapper{
  min-height: 100%;
  min-width: 100%;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;

    min-height: 100%;

  /* Set up proportionate scaling */
  height: auto;
  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%;
}

关于我希望它看起来像什么的图像（跨越整个浏览器窗口）： 在此处输入图像描述

实际的： 在此处输入图像描述

4

3 回答 3

2 
html,body {
    height: 100%;
}
.container_16 {
    min-height: 100%;
}

也许尝试一下。或者做一个小提琴，这样我们就可以弄乱你的代码。

编辑

http://jsfiddle.net/LMFL5/4/（除非你有两台显示器并跨越它们，因为 960 太小了，否则小提琴并不公平。将包装器宽度调整为 500 以查看它小提琴中的动作。通过这种方式，您还可以轻松地为包装器设置断点并制作半响应式站点。我不再这样做了，我使用 flex width 960 网格。

这是我做你经常谈论的事情的方式。

HTML

<body>
    <div class="container_24">
        <div class="wrapper">
            <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>
   <div class="container_16">
       <div class="wrapper">
           <form id="form1" runat="server">
            Adding some content
           </form>
       </div>
   </div>
   <div class="container_24 footer">
        <div class="wrapper">Footer</div>
   </div>
</body>

CSS

html, body {
    height:100%;
    margin: 0;
}

.wrapper{
  width: 960px;
  margin: 0 auto;      
}
.grid_16 {
    text-align: center;
}
.container_16 {
    width: 100%;
    height: 100%;
}
.container_16 .wrapper {
     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);
    height: 100%;
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    background-color: green;
    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%;
}
.container_24.footer {
    bottom: 0;
    position: fixed;
    z-index: 3;
}

我为您的宽度所做的关键是制作一个通用的 960 包装器，我将其包含在每个 div 中。你所有的内容都存在于 960 空间中，但你可以让 div 跨越全屏。这个站点：http: //960.gs/有一个 CSS 生成器，它可以完全按照您的要求执行，并且您的大部分代码看起来都来自这个相同的类模式。在这里可以生成您需要的列数：http: //grids.heroku.com/

基本上，如果你想要一个全屏宽度的 div，只需包装其中一个.contentdiv 就可以了。

于 2013-03-01T23:23:22.057 回答
0

请参阅此处了解 100% 最小高度布局

于 2013-03-01T23:28:01.357 回答
0

@Yecats 可能对你有帮助

 .wrapper
    {
      height: 100%;
      min-width: 100%;  
      /* Set up proportionate scaling */
      width: 100%;
      /* Set up positioning */
      position: relative;
      top: 0;
      left: 0;

    }
于 2013-03-02T11:28:12.493 回答