0

我在一个网站上工作，出于某种原因，在全屏时，页脚会扩展到其全宽，但是当我减小屏幕尺寸时，右下角会出现一个随机的白色块。有任何想法吗？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

4

3 回答 3

1

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

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

这绝对不是解决您的问题的唯一方法，但我希望它在某种程度上对您有所帮助。祝你好运！

于 2013-06-25T20:37:42.360 回答
1

我能够使用以下 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-25T20:57:01.897 回答
0

在你的css中改变id的宽度

div#footer-container{width:1200px;}
于 2013-06-25T19:31:26.700 回答