html – CSS：让页脚粘在页面底部_html-js-css

概述你们中的一些人会立即起草Ryan Fait的粘性页脚,但那是我一直在使用的那个,并且它没有正常运作. 缩小页面进出“unstick”页脚.这是一个实时测试用例：http://jsfiddle.net/C2u3C/ HTML： <!DOCTYPE html><html><head> <title>Andrew Louis</title> <link rel="stylesheet 你们中的一些人会立即起草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 >        <div >            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 ></div>    </div>    <div >        <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 Faithttp://ryanfait.com/*/h2{    Font-family:'WindsongRegular';    Font-size:33px;    color:#D04D21;    text-align:center;}.subTitle{    float:@R_403_6823@;    wIDth:700px;    Font-family:'Lobster1.3Regular';    text-shadow: 0 0 1px rgba(0,0.5);    color:#D04D21;    position: absolute;    Font-size:60px;    top: 4%;    @R_403_6823@: 0px;    height: 1px;    text-align:@R_403_6823@;    margin-@R_403_6823@:150px;    margin-right:50px;  }.subTitle-text p{    text-align:@R_403_6823@;}.subTitle-text{    border-right:2px solID;    padding-right:55px;    float:@R_403_6823@;    border-right:2px solID rgba(0,0.2);    wIDth:700px;    Font-family:'MuSEOSlab500Regular';    text-align:center;    /*margin-@R_403_6823@: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-@R_403_6823@:3px dashed #D04D21;/*#000000;*/    border-right:3px dashed #D04D21;/*#000000;*/</HTML>

解决方法原因是位置：绝对;和浮动：左;在你的副标题课.一旦绝对定位被移除并且您清除浮动,问题就会消失.根据您希望字幕显示的位置,应该有其他选项可用.

CSS：

.subTitle{    float:@R_403_6823@;    wIDth:700px;    Font-family:'Lobster1.3Regular';    text-shadow: 0 0 1px rgba(0,0.5);    color:#D04D21;    text-align:@R_403_6823@;}.footer,.push {    clear:both;    height: 100px; /* .push must be the same height as .footer */}

Live DEMO

总结

以上是内存溢出为你收集整理的html – CSS：让页脚粘在页面底部全部内容，希望文章能够帮你解决html – CSS：让页脚粘在页面底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1081256.html