분리 바닥 글

내 웹 사이트의 웹 페이지 레이아웃 다음과 같이 보일 다음과 같이분리 바닥 글

는

내 웹 사이트의 웹 페이지 레이아웃 보일 :

<body> 
<div class="container"> 
    <div class="sidebar"> 
    </div> 
    <div class="content"> 
    </div> 
</div> 

<div class="pre-footer"> 
</div> 
<div class="footer"> 
</div> 
</body>

CSS는 :

body {background:#eaeaea url('../images/bg/sfere.jpg') no-repeat top center fixed;} 
.footer {float:left;width:100%;height:67px;background:url('../images/bottom.png') bottom center;bottom:0px;left:0px;} 
.container{padding-top:5px;margin-left:100px;margin-right:auto;} 
.sidebar {float:left;width:220px;min-height:610px;text-align:center;} 
.home {margin:178px 0 0 100px;padding:0 10px 0px 10px;width:800px;float:left;} 
.pre-footer {float:left;width:98%;height:100px;position:relative;background:url('../images/pre-footer.png') bottom center;left:15px;bottom:-32px;}

레이아웃에서 모든 요소가 잘 나타나고 있습니다. 그러나 문제는 컨테이너의 높이가 낮고 바닥 글 요소가 컨테이너 아래에 붙어 바닥 글 위치에 머 무르지 않는 경우입니다. 마찬가지로, 필자가 수동으로 높이를 600px로 고정하여 바닥 글처럼 보이게하고, 브라우저의 크기를 조정하면 바닥 글이 여전히 컨테이너 아래에 붙어 있으며 바닥 글처럼 보이지 않습니다.

이 문제를 어떻게 해결합니까?

출처

2012-08-15 user1372448

무엇을 하시겠습니까? 바닥 글을 뷰포트 아래쪽에 고정시키고 싶습니까? – simnom

'.container' 클래스에 최소 높이를 사용하고'400px'와 같은 것으로 설정하십시오 – asprin

@simnom : 예! 그러나 끈적 인 바닥 글처럼. 그것은 항상 하단에 있어야합니다 – user1372448

바닥 글에 고정 된 위치를 사용하십시오.

div.footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    max-height: 50px; /* change this as needed */ 
}

아래쪽 패딩을 지정하여 스크롤 할 때 모든 내용을 볼 수 있도록하십시오.

body { 
    padding-bottom: 50px; /* change this to the max-height given for your footer */ 
}

출처

2012-08-15 09:52:21 techfoobar

나는 그것이 끈적 인 바닥 글이라고 착각했다고 생각합니다. 내가 찾고있는 것은 바닥 글을 뷰포트에 표시되지 않을지라도 항상 바닥에 배치하는 방법입니다. – user1372448

아, 좋아요. 나는 당신이 끈적한 바닥 글을 구현하고자하는 줄 알았는데. – techfoobar

파이어 폭스에서만 문제가되는 것처럼 보입니다. 전체 화면을 수행하면 바닥 글도 위로 이동합니다. 나머지 브라우저는 바닥 글을 잘 보여줍니다. 도움을 주셔서 감사합니다 :) – user1372448

분리 바닥 글

답변

관련 문제