5

在我的网站 christianselig.com 上，我的页脚出现在所有页面上，除了 about.html 页面 (http://christianselig.com/about.html) 由于某些原因它显示在顶部附近。

该页面由两个浮动的 div（一个左，一个右）组成，一个 div 将两者都包裹起来，我意识到浮动可能是问题所在，但我不知道该怎么做。相关的 CSS 和 HTML 可以在下面找到，更多的东西显然可以在网站上找到。

HTML：

<div class="footer-wrapper">
            <div class="footer">
                <p class="copyright">Copyright &copy; 2012 Christian Selig</p>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

CSS：

.footer-wrapper {
    background: #f7f7f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f7f7 0%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #ccc;
    margin: 15px auto 0 auto;
    overflow: hidden;
    padding: 8px 0 5px 0;
}

    .footer {
        color: #808080;
        clear: both;
        font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
        font-size: 0.7em;
        width: 900px; 
    }

        .copyright {
            float: left;
            margin: 0 0 5px 60px;
        }

        .footer ul {
            float: right;
            margin: 0 60px 5px 0;
        }

        .footer li {
            display: inline;
            padding-right: 12px;
        }

            .footer li:last-child {
                padding-right: 0;
            }

        .footer a {
            color: #808080;
            text-decoration: none;
        }

        .footer a:hover, .footer a:active {
            text-decoration: underline;
        }

任何帮助将不胜感激！

4

2 回答 2

2

你的问题在里面lr-wrapper。您的两个元素left-side并right-side没有填满整个宽度，在它们之间留出空间以适应其他浮动元素。

您需要clear在页脚之前添加一个来告诉所有其他元素留在下面，您可以通过在页脚 div 上方添加它来做到这一点：

<div style="clear: both;"></div>

或者您可以以正确的方式进行操作，将其添加到您的 css 中，然后clearfix在您需要一些东西来打破浮动时应用该类：

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

更多信息可以在这里找到：http: //html5boilerplate.com/

于 2012-09-13T22:39:48.717 回答
1

您只需添加以下内容以及现有样式：

.lr-wrapper { overflow:hidden; }

更多信息

于 2012-09-13T22:40:50.087 回答