半屏的div不会扩展到完全宽度

我正在一个网站上，出于某种原因，在全屏页脚扩展到完全宽度，但是当我降低了屏幕尺寸，有一个随机白块出现在右下角。有任何想法吗？ http://i.imgur.com/9KyaXO6.png 半屏的div不会扩展到完全宽度

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

来源

2013-06-25 Andrew

在Firefox 21.0看起来不错 – Starx

我在Aurora和Chrome中打开它，两者似乎都有问题。 – Andrew

看起来您的标题可能会向右扩展得太远。 – showdev

我可以使用下面的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 */ 
}

来源

2013-06-25 20:57:01 showdev

的变化ID在你的CSS的widh

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

来源

2013-06-25 19:31:26

嗯......好吧，你可以解决这个问题的一种方法是将你的身体的最小宽度设置为与设置宽度（现在，它被设置为960px）的页面上最宽的元素相等。在这种情况下，这将是你的“＃标头内部”，它的宽度是1200px。所以，你的身体会最终在styles.css中寻找这样的：

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

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

来源

2013-06-25 20:37:42 Serlite

半屏的div不会扩展到完全宽度

回答

相关问题