Центр div контейнер, появляется полоса прокрутки - PullRequest
Новая
       1

Центр div контейнер, появляется полоса прокрутки

1 голос
/ 15 декабря 2010

У меня следующая 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, но понятия не имел, как справиться с этой проблемой.

Есть идеи?

1 Ответ

1 голос
/ 15 декабря 2010

@ ArtWorkAD

CSS3 представил модель Flexible box, возможно, вы можете использовать ее в зависимости от аудитории вашего сайта ...

Таким образом, чтобы вертикальные и горизонтальные центральные элементы уровня блока в элементе body, вам просто нужно написать это объявление 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/

1012 * редактировать *

Чтобы иметь широкую поддержку браузера, вы всегда можете положиться на CSS-хаки и сделать некоторые хитрости с минусами, как видно на http://www.jakpsatweb.cz/css/css-vertical-center-solution.html ;)

Да, и если вам вообще не нужна полоса прокрутки, убедитесь, что вы поместили переполнение: скрытое на элементе body.

...