Question

我有两种不同的页面样式，一种在我的索引上有一个巨大的“图片”，而另一种样式是我使用的主要样式，不包含“图片”。

第一个设计是从codepen.io/jeffbredenkamp/pen/ZpGOAW中获取的，只删除了一些内容（几乎没有任何内容，只有height或margin。

问题是我的页脚是愚蠢的，并且在索引上它最终在header（上面的链接中的图片）中，即使它在其下面有内容。在其他页面上，页脚粘在底部（我想要的方式）但是当我缩放时它会覆盖其他内容。

我无法共享所有代码，因为它出于某种原因在codepin.io上以不同方式显示，但我已经分享了footer，footer.css以及我{{1}的样式（.tabs是缩放时我的页脚移动到上面的其他内容）

*编辑：我已经能够将所有内容放入codepen.io中。我有很多混乱的CSS，因为有4个不同的CSS文件组合，但你可以看看这里：

样式1：http://codepen.io/anon/pen/XjmZzy 风格2：http://codepen.io/anon/pen/zKvEPy 页脚：

.tabs

footer.css：

<div style="padding:30px;"></div>

<footer class="footer">
    <div class="banner">
        <a href=""><img src="/assets/images/templates/footer-banner.png" class="banner"/></a>
    </div>

    <div class="item i1">
        <h1>About</h1>
        <div class="p">
            about information.
        </div>
    </div>


    <div class="item i2">
        <h1>Help</h1>
        <div class="p">
            You can find a help page<a href="/help" class="footer-link">here</a>.
        </div>
    </div>


    <div class="item i3">
        <h1>Server</h1>
        <div class="p">
            server information<br />
        </div>
    </div>



    <div class="host">
        <img src="" class="host" />
    </div>


    <div class="footer-bottom">
        <div class="fl">
            <a class="footer-link" href="/help">Help</a>    |
            <a class="footer-link" href="/#about">About</a> |
            <a class="footer-link" href="/contact">Contact</a>
        </div>

        <div class="fr" style="padding-right:10px;">&copy; Copyright <?php echo $domain; ?> | 2015 - <?php echo date("Y") ?></div>
    </div>
</footer>

.tabs：

.footer {
    width:100%;
    background-color:#23282c;

    position: absolute;
    bottom: 0;

    min-height:150px;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */

}

.footer-bottom {
    background-color:#1e2327;
    font-size:11px;
    line-height:25px;
    color:#777f8c;

    position: absolute;
    bottom: 0;

    height:25px;
    width:100%;
    z-index:9;
}

.banner {
    width:35%;
    margin-left:10px;
    line-height:160px;
    padding:7px;
    float:left;
}

.item {
    position:relative;
}

.i1 {
    float:left;
    width:15%;
    padding-top:7px;
    margin-left:-150px;
    padding-right:190px;
    font-size:15px;
}

.i2 {
    float:left;
    width:15%;
    padding-top:7px;
    margin-left:-150px;
    padding-right:190px;
    font-size:15px;
}

.i3 {
    float:left;
    width:15%;
    padding-top:7px;
    margin-left:-150px;
    padding-right:190px;
    font-size:15px;
}

.item h1 {
    color:#fff;
    border-bottom:1px solid #475f93;
    font-size:18px;
    text-align:left;
}

.item .p {
    color:#777f8c;
}

.footer-link {
    color:#777f8c;
    margin-left:5px;
    margin-right:5px;
}

.footer-link:hover {
    color:#fff;
}

.tabs css：

<div class="tabs" id="about">
        <h1>About</h1>
        <div class="p">
            Welcome to <span><?php echo $address; ?></span> a website created by <span><?php echo $domain; ?></span>.<br />     
            Got any questions? Please contact us <br />
            <a href="/contact" class="contact-btn">Contact Us</a>
        </div>  
    </div>

Answer 1

您需要将position中的.footer替换为position: relative;，然后移除margin-bottom: -142px;的{{1}}。

.wrapper

PS：你真的不需要做.footer { width:100%; background-color:#23282c; position: relative; min-height:150px; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ } .wrapper { min-height: 100%; }，你可以使用<footer class="footer">并使用<footer>代替footer将其定位在CSS中

页脚不会对齐或正常工作

1 个答案: