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

Question

Когда браузер скрывает некоторые элементы дизайна (то есть появляются полосы прокрутки), верхний и нижний колонтитулы обрезаются.Другими словами, если браузер уже, чем ширина разделителей «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> 

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

Заранее благодарим за помощь.

Answer 1

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

body {
  min-width: 960px;
}

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

Answer 2

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

* 1006.* Демо: jsfiddle.net / DRF23

Answer 3

Это сработало для меня:

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

Answer 4

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

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> 

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