Ширина баннера 100% распространяется на размер окна, но не на размер документа - PullRequest
Новая
       5

Ширина баннера 100% распространяется на размер окна, но не на размер документа

0 голосов
/ 22 июля 2010

На нашей веб-странице есть баннер iamge, градиент которого повторяется по оси X.Проблема в том, что если наш контент на нашей веб-странице (который динамически создается на основе данных в нашей базе данных) охватывает ширину, превышающую ширину окна, тогда наш баннер больше не охватывает всю ширину документа при прокрутке.Кто-нибудь знает, как это исправить?

Простой пример размещен ниже.Синий - это наш «баннер», а «красный» - это наш контент. 

<html>
<head>
    <style>

        *{
            padding:0;
            margin:0 auto;
        }

        #header{
            height:80px;
            background-color:blue;
            width:100%;
        }

        #content{
            width:1500px;
            background-color:red;
        }

    </style>
</head>
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>

</html>

Ответы [ 3 ]

3 голосов
/ 22 июля 2010

Попробуйте поместить заголовок внутри содержимого div.Вот так: 

...
</head>

<div id="content">
    <div id="header"></div>
    <h1>TEST</h1>
</div>

</html>

Еще лучше добавить обертку: 

<html>
<head>
    <style>

        *{
            padding:0;
            margin:0 auto;
        }

        #wrapper {
            width:1500px;    
        }

        #header{
            height:80px;
            background-color:blue;
            width:100%;
        }

        #content{
            width:100%;
            background-color:red;
        }

    </style>
</head>

<div id="wrapper">
    <div id="header"></div>
    <div id="content"><h1>TEST</h1></div>
</div>

</html>
0 голосов
/ 22 июля 2010

поместите 

<div id="wrapper"> header & content </div>

вокруг всего ... создайте оболочку position:relative, поэтому заголовок 100% - это ширина оболочки, которая будет любым содержимым.

0 голосов
/ 22 июля 2010

Установка минимальной ширины на #header, равной ширине #content, сделает это: 

#header{
    height:80px;
    background-color:blue;
    width:100%;
    min-width: 1500px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...