CSS: Nakładanie stopki na spód strony

Niektórzy z was natychmiast sporządzą lepką stopkę Ryana Faita, ale to ta, z której korzystałem i która nie działała prawidłowo.CSS: Nakładanie stopki na spód strony

Powiększanie strony do wewnątrz i na zewnątrz "unkuje" stopkę. Oto żywo przypadek testowy: 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>

Źródło

2012-06-27 Louis93

"Powiększanie i pomniejszanie strony "unsticks" stopce" - w którym przeglądarce (y)? – thirtydot

Grałem stopami i ostatecznie znalazłem się w użyciu obiektu pomiędzy nagłówkiem i stopką. Możesz rzucić okiem na to, co mam na http://www.cdsan.com. Wszystkie inne warianty, które próbowałem albo demonstrowały magiczne zachowanie, albo nie działały, to tylko niektóre przeglądarki. –

@thirtydot Na wszystkich z nich! – Louis93

przyczyną jest position:absolute; i float:left; w twojej klasie napisów. Po usunięciu położenia bezwzględnego i usunięciu pływaka problem znika. W zależności od tego, gdzie dokładnie chcesz wyświetlać napisy, powinny być dostępne inne opcje.

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

Źródło

2012-06-27 01:07:09

** + 1 ** za doskonałą odpowiedź. – arttronics

Można to wykorzystać:

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

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

Źródło

2012-06-27 00:42:06 bfavaretto

Obejmuje treść, jeśli została ustawiona jako poprawiona. –

Tak, to jednak pokrywa się z treścią, ale dobre rozwiązanie. – Louis93

@JoshMein Tak, myślę, że źle zrozumiałem pytanie, wygląda na to, że OP szukał innego efektu. – bfavaretto

CSS: Nakładanie stopki na spód strony

Odpowiedz

Powiązane problemy