Question

你们中的一些人会立即起草Ryan Fait的粘性页脚，但那是我一直在使用的那个，并且它没有正常运作。

将页面放大和缩小“unstick”页脚。这是一个实时测试案例：http://jsfiddle.net/C2u3C/

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Andrew Louis</title>
    <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" />
    <link rel="stylesheet" href="about-me.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="javascript/jqueryscript.js"></script>

<body>
    <br>
    <h2>Andrew Louis</h2>

    <div class="wrapper">
        <div class="subtitle">
            About Me 
            <div class = "subtitle-text">
            <br> <!--Spacing between image and subtitle -->
            <img align="center" src="images/Profile.jpg" /><br><br>
            <p>Synth sriracha wes anderson blog etsy, pickled truffaut street art. Brooklyn wolf sriracha trust fund fap. Retro chillwave readymade master cleanse. Mixtape carles pop-up ennui, viral DIY freegan fingerstache post-ironic williamsburg organic hella single-origin coffee lomo you probably haven't heard of them. Pickled biodiesel vinyl flexitarian narwhal occupy fanny pack, butcher forage lo-fi marfa iphone wayfarers. Gastropub aesthetic brooklyn, mcsweeney's carles wayfarers pop-up viral wolf thundercats. Put a bird on it brunch direct trade dreamcatcher kale chips, before they sold out pour-over tofu chillwave fixie 8-bit flexitarian typewriter.</p>


            <br><p> Words and stuff </p> 

            <br>
            </div>
    </div>

    <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright © 2012 Andrew Louis</p>
    </div>
</body>
</head>

CSS：

/*The New Stuff Begins Here*/

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    clear:both;
    height: 100px; /* .push must be the same height as .footer */
}
.footer{
    font-family: 'Lobster1.3Regular';
    color:white;
    text-align: center;
    line-height: 25px;
    background:#D04D21;
}
/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

h2{
    font-family:'WindsongRegular';
    font-size:33px;
    color:#D04D21;
    text-align:center;
}

.subtitle{
    float:left;
    width:700px;
    font-family:'Lobster1.3Regular';
    text-shadow: 0 0 1px rgba(0,0,0,0.5);
    color:#D04D21;
    position: absolute;
    font-size:60px;
    top: 4%;
    left: 0px;
    height: 1px;
    text-align:left;
    margin-left:150px;
    margin-right:50px;  
}

.subtitle-text p{
    text-align:left;
}

.subtitle-text{
    border-right:2px solid;
    padding-right:55px;
    float:left;
    border-right:2px solid rgba(0,0,0,0.2);
    width:700px;
    font-family:'MuseoSlab500Regular';
    text-align:center;
    /*margin-left:50px;
    margin-right:50px;*/
    font-size:20px; 
    color:#D04D21;
}
.subtitle-text img{
    padding:3px;
    border-top: 3px dashed #D04D21;/*#000000;*/
    border-bottom:3px dashed #D04D21;/*#000000;*/
    border-left:3px dashed #D04D21;/*#000000;*/
    border-right:3px dashed #D04D21;/*#000000;*/
</html>

Answer 1

您可以使用：

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

http://jsfiddle.net/C2u3C/2/

Answer 2

原因是字幕类中的position:absolute;和float:left;。一旦绝对定位被移除并且您清除浮动，问题就会消失。根据您希望字幕显示的确切位置，应该有其他可用选项。

<强> CSS ：

.subtitle{
    float:left;
    width:700px;
    font-family:'Lobster1.3Regular';
    text-shadow: 0 0 1px rgba(0,0,0,0.5);
    color:#D04D21;
    text-align:left;
}

.footer, .push {
    clear:both;
    height: 100px; /* .push must be the same height as .footer */
}

Live DEMO

CSS：让页脚粘在页面底部

2 个答案: