Как получить эффект «центрального столбца» без фонового изображения? - PullRequest
Новая
       5

Как получить эффект «центрального столбца» без фонового изображения?

1 голос
/ 28 февраля 2009

Я разрабатываю макет веб-сайта, в котором весь контент содержится в центральной колонке фиксированной ширины. Я хочу, чтобы этот центральный столбец имел другой цвет фона, чем остальная часть страницы. Я также хочу, чтобы центральный столбец продолжался от самой верхней части браузера до самой нижней части.

Я могу успешно сделать это, используя фоновое изображение размером 1000x1, следующим образом: 

 html
{
    background: #333333 url(./images/global/background.png) repeat-y center;
}

body
{
    margin: auto;
    width: 1000px;
}

Это прекрасно работает в большинстве браузеров, но я бы предпочел сделать это без изображения.

Я попытался установить для "html" и "body" значение "height: 100%", а затем присвоить "body" цвет фона, но если содержимого достаточно для прокрутки, фон имеет только высоту, равную в браузере и при прокрутке вниз фон остается позади.

Любые советы приветствуются.

Ответы [ 2 ]

4 голосов
/ 01 марта 2009

Решение состоит в том, чтобы использовать div обертки, который имеет высоту 100%, и отдельный div содержимого, который будет увеличиваться, если содержимое внутри достаточно длинное, и оба имеют заданный цвет фона. Вот пример (протестирован в Firefox, Chrome и IE7): 

<html>
    <head>
        <style type="text/css">
            html {height: 100%}
            body {
                height: 100%; 
                margin: 0; 
                text-align: center;//for IE7
            }
            div#wrapper { 
                background-color: #efefef;
                width: 720px;
                margin: 0 auto;
                height: 100%;
                text-align: left;
            }
            div#content {
                background-color: #efefef;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <div style="height: 2000px">test</div>
            </div>
        </div>
    </body>
</html>
0 голосов
/ 28 февраля 2009 
body { 
    text-align: center; 
    margin: 5em 0 0 0; 
    vertical-align: middle; 
}

#content { 
    width: 760px; 
    text-align: left; 
    margin: 0 auto; 
}

Подробности здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...