5

你们中的一些人会立即草拟 Ryan Fait 的粘性页脚，但这是我一直在使用的，它一直没有正常工作。

放大和缩小页面会“解除”页脚。这是一个现场测试用例：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>
4

2 回答 2

4

原因是您的字幕类中的position:absolute;and 。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 */
}

现场演示

于 2012-06-27T01:07:09.560 回答
4

你可以使用这个：

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

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

于 2012-06-27T00:42:06.290 回答