如何防止设计在浏览器窗口中被切断？

Question

当浏览器隐藏某些设计(意味着滚动条出现)时,页眉和页脚会被切掉.换句话说,如果浏览器比"logo"和"footer_links"div的宽度窄,那么如果用户水平滚动以查看页面的其余部分,则它会切断右侧.似乎问题源于尝试在页眉或页脚中定位(相对或绝对)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元素应用min-width.因此,如果您的网站至少为960px:

body {
  min-width: 960px;
}

这显然有效,因为宽度为100%将是浏览器的宽度,如果您的内容比这更宽,背景仍然固定为正文的宽度.