CSS 100% ширины при изменении размера браузера - PullRequest
Новая
       10

CSS 100% ширины при изменении размера браузера

6 голосов
/ 27 сентября 2010

Привет всем, я пытаюсь создать макет с использованием CSS, и я сталкиваюсь со странной проблемой.Ну странно для меня.У меня есть 3 делителя Заголовок , Нижний колонтитул и MainContent .Верхний и нижний колонтитулы должны оставаться на постоянной ширине 100%, в то время как область MainContent должна быть зафиксирована центрально на уровне 996 пикселей;Это все хорошо, однако, когда я изменяю размер окна браузера до ширины ниже 996 пикселей, а затем прокручиваю содержимое окна вправо, верхний и нижний колонтитулы 100% кажутся усеченными и перестают быть 100%Я выполнил небольшой сценарий, чтобы проиллюстрировать проблему (стили, встроенные, чтобы сохранить его компактным).Я знаю, что могу добавить переполнение: скрыто для каждого из контейнеров, чтобы отключить полосы прокрутки при изменении размера окна.Я также написал небольшой кусочек jQuery, чтобы заставить div вернуться к ширине, если ширина падает ниже определенной ширины.Однако мой вопрос касается CSS, есть ли лучшее решение для чистого CSS для этой проблемы?Или кто-нибудь может объяснить, почему это происходит?Заранее спасибо!DotsC 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">

    <div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>

    <div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
        <div id="inner-content">
            CONTENT OF THE PAGE HERE
        </div>
    </div>
    <div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>

Ответы [ 2 ]

5 голосов
/ 27 сентября 2010

Я не совсем ясно по вашей проблеме, но вы можете установить min-width:996px; в верхнем и нижнем колонтитулах, чтобы они были как минимум такими же широкими, как и содержимое.

2 голосов
/ 27 сентября 2010

Попробуйте, и, пожалуйста, используйте тип документа HTML5. 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body{margin:0;text-align:center;}
            .header,.content,.footer{text-align:left;clear:both;margin:0 auto;}
            .header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;}
            .content{width:996px;height:512px;background-color:red;}
        </style>
        <title>Index</title>
    </head>
    <body>
        <div class="header">
            Header stuff here
        </div>
        <div class="content">
            Page content stuff here
        </div>
        <div class="footer">
            and your footer...
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...