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元素。因此，如果您的网站至少是960px：

body {
  min-width: 960px;
}

这显然有效，因为宽度为100％将是浏览器的宽度，如果您的内容宽于此值，则背景仍然固定为正文的宽度。

Answer 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>

希望它有所帮助。

Answer 3

如果您知道#header的高度，一个选项是使用与#header相同颜色和高度的图片，并将其用作body的背景图片。

演示：jsfiddle.net/DRF23

Answer 4

这对我有用：

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

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

4 个答案: