Question

我正在网站上工作，出于某种原因，在全屏幕下，页脚会扩展到其全宽，但是当我缩小屏幕尺寸时，右下方会出现一个随机的白色块。有任何想法吗？ http://i.imgur.com/9KyaXO6.png

HTML：

<div id="footer-container">
        <footer>
             <?php require_once("footer.php"); ?>
        </footer>
    </div>

CSS：

div#footer-container {
      min-width: 100%;
      background: #41038e;
      bottom: 0;
      height: 150px;
      padding: 0;
     margin: 0 auto;
 }
footer {
     width: 960px;
     height: 140px;
     margin: 0 auto;
     padding-top: 10px; 
}

以下是网站：http://thecupertinoflorist.com/index.php

Answer 1

嗯......好吧，你可以解决这个问题的一种方法是将你的身体的最小宽度设置为等于页面上具有设定宽度的最宽元素（现在，它设置为960px）。在这种情况下，这将是你的“＃header-inner”，宽度为1200px。所以你的身体最终会在styles.css中看起来像这样：

body {
    font-family: OpenSansRegular;
    width: 100%;
    min-width: 1200px;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #FFF;
}

这绝对不是解决您问题的唯一方法，但我希望它能以某种方式帮助您。祝你好运！

Answer 2

我能够使用以下CSS更改来解决问题：
（像Serlite的回答）

html {
    height: 100%;
    margin: 0;
    min-width: 1200px; /* ADDED. keeps site from shrinking below 1200px wide */
    padding: 0;
    width: 100%;
}

您可以删除其他一些定义：

div#header-inner {
    height: 200px;
    margin: 0 auto;
    padding: 0;
    /*width: 1200px; REMOVED */
    z-index: 1;
}    

.navbar {
    bottom: 0;
    height: 50px;
    margin: 0 auto;
    /*width: 1200px; REMOVED */
}    

.navbar-inner {
    background: none repeat scroll 0 0 #41038E;
    border: medium none;
    margin: 0 auto;
    padding: 0;
    /*width: 1200px; REMOVED */
}    

div#logo {
    height: 100px;
    margin: 0 auto;
    padding-top: 25px;
    /*width: 1200px; REMOVED */
}

Answer 3

更改css中id的宽度

div#footer-container{width:1200px;}

半屏div不会扩展到其全宽

3 个答案: