正确对齐Div

我需要一些认真的CSS帮助来处理当前的项目。我附上了我希望我的页面看起来像的屏幕截图。我遇到的问题是正确定位div，以及使页面的宽度/高度保持100％。我想在不使用Javascript的情况下做到这一点。这是我的HTML：正确对齐Div

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

形象有什么我希望它看起来像（横跨整个浏览器窗口）： enter image description here

实际： enter image description here

来源

2013-03-01 Yecats

我不知道的显示全高，除非你想一个好办法底部绿色的酒吧永远在那里。当你获得一些内容时，底部的绿色条应该向下移动。 – Leeish 2013-03-01 23:19:50

.content-16 - 它是否有任何内容？将其设置为高度：100％不能保证延伸。另外，你是否设置你的HTML和身体宽度：100％;高度：100％;？ – 2013-03-01 23:19:51

如果你想让你的内容-16能够变大，我会设置'min-height'而不是'height'。如果它是父元素，它将是100％的高度。 – Leeish 2013-03-01 23:21:11

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

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

编辑

http://jsfiddle.net/LMFL5/4/（小提琴不会，除非你有两个监视器和跨度横跨两者为960太小，做到公正，调节包装宽度喜欢500看到它在这样你也可以很容易地为你的包装设置断点并制作一个半响应网站，我不再这样做，我使用柔性宽度为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，只需将其中一个.content div包装好，你就可以走了。

来源

2013-03-01 23:23:22 Leeish

这并没有解决它..虽然根据您的建议，我创建了一个小提琴：http://jsfiddle.net/LMFL5/ – Yecats 2013-03-02 04:59:05

http://jsfiddle.net/LMFL5/2/你有一些高度覆盖的东西。这解决了一些问题。你可能需要调整你的阴影和东西。 – Leeish 2013-03-02 16:03:05

这看起来好多了，但并不完全是我想要的确切输出。页眉/页脚位于正确的位置，内容跨越，但我需要的内容部分只有960px宽，而不是整个页面，如页眉和页脚。顺便谢谢你的帮助！ – Yecats 2013-03-03 00:04:17

为100％，最小高度布局参见here

来源

2013-03-01 23:28:01

这不起作用，因为我希望我的页眉/页脚跨越整个页面。看来，如果我将容器的宽度更改为100％，并将内容宽度更改为960像素，则不会正确注册。（内容将跨越整个页面。） – Yecats 2013-03-02 05:42:25

@Yecats可能是这一个帮助你

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

    }

来源

2013-03-02 11:28:12 snowp

回答

相关问题