Блог

Главная - Вопросы по программированию - Как я могу предотвратить отключение дизайна в окне браузера?

Как я могу предотвратить отключение дизайна в окне браузера?

#css #overflow

#css — файл #переполнение #css

Вопрос:

Когда браузер скрывает часть дизайна (то есть появляются полосы прокрутки), верхний и нижний колонтитулы обрезаются. Другими словами, если браузер уже, чем ширина разделов «logo» и «footer_links», то он обрезает правую сторону, если пользователь прокручивает страницу горизонтально, чтобы просмотреть остальную часть страницы. Похоже, что проблема связана с попыткой позиционировать (относительный или абсолютный) div в верхнем или нижнем колонтитулах.

Вот CSS:

 html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
    background:green;
    padding:0px;
    margin: 0;
    height: 100px;
}
#logo {
    position: relative;
    width: 900px;
    margin: 0 auto;
    left: 20px;
    background: yellow;
    height: 70px;
}
#body {
   padding:10px;
   padding-bottom:60px; 
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   
   background: blue;
}
#footer_links {
    width: 900px;
    height: 60px;
    background: yellow;
    margin: 0 auto;
}

Вот HTML:

 <div id="container"> 

<div id="header"> 
    <div id="logo">
    </div>
</div> 

<div id="body"> 
</div>

<div id="footer">
    <div id="footer_links"> 
    </div>
</div> 

</div>

Я думал, что overflow: visible решит проблему, но это не так. Как я могу избежать этой проблемы?

Заранее спасибо за вашу помощь.

Комментарии:

1. Эй, Дэвид, у тебя есть ссылка на сайт с этой проблемой?

2. Вы спрашиваете, если посетитель делает окно своего браузера шириной менее 900 пикселей (ширина «логотипа»), как вы изменяете размер логотипа, чтобы он соответствовал размеру?

3. @Brian — нет ссылки на действующий веб-сайт (я просто разрабатываю его локально), но вы можете видеть, что у этого веб-сайта похожая проблема: hellofax.com В этом случае, как только появляется горизонтальная полоса прокрутки при изменении размера окна браузера до более узкой ширины, при последующей прокрутке по горизонтали верхняя и нижняя навигация обрезаются.

4. @Marcel — если посетитель делает окно своего браузера меньше ширины логотипа в заголовке, появляется горизонтальная полоса прокрутки. Если вы затем прокрутите назад, чтобы открыть страницу, вы увидите, что желтый заголовок отключен.

Ответ №1:

Вот решение, с которым я только что столкнулся — примените минимальную ширину к элементу body. Итак, если ваш сайт как минимум имеет ширину 960 пикселей:

 body {
  min-width: 960px;
}

Это, по-видимому, работает, потому что ширина 100% будет равна ширине браузера, и если ваш контент шире этого, фон по-прежнему привязан к ширине основного текста.

Ответ №2:

Это должно соответствовать вашим потребностям

CSS :

 html,body { margin:0; padding:0; height:100%}
#container {min-height:100%;position:relative;}
#header { background:green;padding:0px; margin: 0; height: 100px;}
#logo { position: relative; width: 900px; margin: 0 auto;
        background: yellow; height: 70px;}
#body { padding:10px 0 60px; margin:0 auto;
        width:900px; background:red; /*add a height*/ }
#footer {margin:0;bottom:0;width:100%;height:60px;   background: blue;}
#footer_links {width: 900px;height: 60px;background: yellow;margin: 0 auto;}

HTML :

 <div id="container"> 
<div id="header"> 
<div id="logo"> </div>
</div> 
<div id="body"> </div>
<div id="footer">
<div id="footer_links"> </div>
</div> 
</div>

Надеюсь, это поможет.

Комментарии:

1. Спасибо — однако, похоже, что даже при таком решении, когда вы уменьшаете окно, если вы затем прокрутите назад по горизонтали, вы увидите, что зеленая область заголовка обрезана. Другими словами, как только окно вашего браузера станет уже ширины логотипа (выделено желтым цветом), остальная часть заголовка будет обрезана в точке окна браузера без увеличения на 100% ширины.

Ответ №3:

Один из вариантов, если вы знаете высоту #header , — использовать изображение того же цвета и высоты, что и #header , и использовать его в качестве фонового изображения для body .

Демо:jsfiddle.net/DRF23

Комментарии:

1. Спасибо, Марсель — я пробовал это, но это все еще не оптимально, особенно если вам нужно отдельное фоновое изображение для тела.

2. @David: В этом случае html элемент доступен для отдельного фона, но я согласен, это не оптимально, если #header не будет статической высоты, и в этом случае это решение.

Ответ №4:

У меня это сработало: 

 html, body {
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}