CSS : 바닥 글을 페이지 아래쪽에 붙여 넣기

여러분 중 일부는 즉시 Ryan Fait의 끈끈한 바닥 글을 그릴 것입니다.하지만 그 중 하나는 제가 사용하고있는 것이며, 제대로 작동하지 않았습니다.CSS : 바닥 글을 페이지 아래쪽에 붙여 넣기

페이지를 확대 및 축소하여 바닥 글을 "제거합니다". 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>

출처

2012-06-27 Louis93

"바닥 글"unsticks "에 밖으로 페이지를 확대"- 어떤 브라우저 (들)? – thirtydot

나는 바닥 글을 가지고 노는 중이었고 마침내 내 머리말과 꼬리말 사이의 객체로

을 사용하는 것으로 끝났다. http://www.cdsan.com에서 내가 가지고있는 것을 살펴볼 수 있습니다. 내가 시험해 보았던 다른 모든 변종은 브라우저의 일부입니다. –

@thirtydot 그들 모두에! – Louis93

답변

원인은 자막 클래스에 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

출처

2012-06-27 01:07:09

** + 1 ** 우수한 답변입니다. – arttronics

당신은이를 사용할 수 있습니다 여기에 라이브 테스트 케이스이다

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

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

출처

2012-06-27 00:42:06 bfavaretto

고정으로 설정하면 내용을 덮습니다. –

그래, 그것은 콘텐츠, 좋은 솔루션을 비록 중복. – Louis93

@JoshMein 네, 질문을 오해 한 것 같습니다. OP가 다른 효과를 찾고있는 것 같습니다. – bfavaretto

CSS : 바닥 글을 페이지 아래쪽에 붙여 넣기

답변

관련 문제