Question

我需要一些严肃的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%;
}

我希望它看起来像的图像（跨越整个浏览器窗口）： enter image description here

实际值： enter image description here

Answer 1

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

也许试试看。或者做一个小提琴，这样我们就可以搞砸你的代码了。

修改

http://jsfiddle.net/LMFL5/4/（小提琴并不公平，除非你有两个显示器并跨越两个显示器，因为960太小。将包装器宽度调整为500，以便在小提琴中看到它的作用这样你就可以轻松地为你的包装器设置断点并建立一个半响应的站点。我不再这样做了，我使用了flex 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，你就可以了。

Answer 2

请参阅here了解100％最小高度布局

Answer 3

@Yecats可能对你有帮助

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

    }

正确对齐Div

3 个答案: