居中 div 容器，出现滚动条

发布于 2024-10-07 15:26:47 字数 960 浏览 5 评论 0原文

我有以下 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 但不知道如何解决这个问题。

有什么想法吗？

原文

I have following html site structure:

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

Now I want to center the #container. The works when I apply following 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;
}

The magin: auto; centers the container. My problem is that I need the container to be larger, but when I increase width from 960 to 980 I get a vertical scrollbar. I played around with the css but got no clue how to manage that problem.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小清晰的声音 2024-10-14 15:26:47

@ArtWorkAD，

CSS3引入了灵活的盒子模型，也许你可以根据你网站的受众来使用它

......在 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 hack 并进行一些负边距欺骗，如 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
;)

哦，如果您根本不需要滚动条，请确保您已在 body 元素上放置了 Overflow:hidden 。

@ArtWorkAD,

CSS3 introduced the Flexible box model, maybe you can use it depending the audience of your website...

So to Vertically & Horizontally center block Level elements in the body element, you'd just have to write this CSS declaration:

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/

edit

To have wide browser support, you can always rely on CSS hacks and do some negative margin trickery as seen on http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
;)

Oh and if you don't want a scrollbar at all, make sure you have put an overflow:hidden on the body element.

回复收藏 0 原文

~没有更多了~