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

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 元素应用最小宽度。因此，如果您的网站宽度至少为 960 像素:

body {
  min-width: 960px;
}

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