Question

我有以下html网站结构：

  <body>
    <div id="header"></div>
    <div id="container">    
        <div id="util_header"></div>
        <div id="contentwrapper" class="frontpage">Content</div>
    </div>
  </body>

现在我想把#container放在中心位置。当我申请以下css时的作品：

#container {
    width: 960px;
    margin: auto;
    background:red;
}

#util_header{
    width: 100%; height:32px;
    position: relative;
    background:url('../images/logo.png') no-repeat #eeeeee;
    border-top:1px solid #b6bac0;
}

#header {
    width: 100%; height:32px;
    position: absolute;
    background:#eeeeee;
    border-top:1px solid #b6bac0;
}

#contentwrapper {
    float: left;
    position: relative;
    height: auto;
    background:red;
}

magin: auto;使容器居中。我的问题是我需要容器更大，但当我将宽度从960增加到980时，我得到一个垂直滚动条。我玩css但不知道如何解决这个问题。

有什么想法吗？

Answer 1

@ArtWorkAD，

CSS3推出了灵活的盒子模型，也许您可以根据您网站的受众使用它...

所以对于垂直＆amp;在body元素中水平居中阻止Level元素，你只需编写这个CSS声明：

body {
  display: box;
  box-orient: horizontal;
  /* horizontally centered */
  box-pack: center;
  /* vertically centered */
  box-align: center;
  width: 100%;
  height : 100%;
}

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

修改的

要获得广泛的浏览器支持，您可以始终依赖CSS hacks并执行一些负余量欺骗，如http://www.jakpsatweb.cz/css/css-vertical-center-solution.html所示 ;）

哦，如果你根本不需要滚动条，请确保你已经放了一个溢出：隐藏在body元素上。

出现中心div容器，滚动条

1 个答案: