2013-02-05 5 views
1

페이지 하단에 바닥 글을 유지하려고합니다. 제가 시도한 첫 번째 방법은 바닥 글이 페이지의 맨 위에 있고 배경이 표시됩니다. 이것은 위치와 함께했습니다 : 정적;바닥 글이 페이지 하단에 없음

image goes here

(아래 그림처럼) I 시도 번째 방법은 절대 꼬리말이다. 스크롤하는 데 필요한 콘텐츠가 충분하지 않은 페이지의 맨 아래에 바닥 글을 넣습니다. 그러나 스크롤이있는 페이지에서는 내용이로드 될 때 창의 맨 아래에 위치하며 내용의 맨 위에 있습니다. 페이지.

다음
<div id="container"> 
    <div id="content"> 
     <div id="slideshow"></div> 
     <div id="clear"></div> 
     <div id="boxes"> 
      <div id="box"> 
       <div id="boxheader"></div> 
       <div id="box1" class="box"></div> 
      </div> 
      <div id="box"> 
       <div id="boxheader"></div> 
       <div id="box2" class="box"></div> 
      </div> 
      <div id="box"> 
       <div id="boxheader"></div> 
       <div id="box3" class="box"></div> 
      </div> 
     </div> 
     <div id="clear"></div> 
    </div> 
</div> 
<div id="footer">Content</div> 

div#container{ 
    position:relative; 
    margin: 4px; 
} 
#boxes{ 
    width: 960px; 
    margin: 50px auto 0px auto; 
} 
#footer { 
    clear: both; 
    margin-top: 50px; 
    bottom: 0; 
    left: 0; 
    height: 200px; 
    background-color: #fff; 
    width: 100%; 
} 

당신이 추가 정보가 필요하면 알려주세요 CSS에게 있습니다 :

여기에 내 현재 코드입니다.

+0

을 그렇게

아마이 도움이 될 것입니다 http://stackoverflow.com/questions/13103910/create-footer-element-located-beneath-the-screen – Hope4You

+2

뭔가 있나요 'position : fixed'를 사용하는 것이 잘못 되었습니까? –

+0

@Explosion 환약 "공중에있는 반복"을하지 않는 한 숨겨진 부분을 숨기기 위해 스크롤 막대가없는 사이트의 일부를 덮는 바닥 글로 끝납니다. –

답변

0

html, body { height: 100%; }

이 사업부의 바닥 글 전에 전체 내용을 포장 설정합니다.

.wrapper { height:auto !important; min-height:100%; }

당신은 당신이 브라우저 창 하단에 표시하는 방법을 바닥 글의 정도에 따라 원하는대로 최소 높이를 조정할 수 있습니다. 90 %로 설정하면 스크롤하기 전에 바닥 글의 10 %가 표시됩니다. 귀하의 예를

<body style="height: 100%"> <div id="container" style="min-height: 90%; height: auto !important;"> <div id="content"> <div id="slideshow"></div> <div id="clear"></div> <div id="boxes"> <div id="box"> <div id="boxheader"></div> <div id="box1" class="box"></div> </div> <div id="box"> <div id="boxheader"></div> <div id="box2" class="box"></div> </div> <div id="box"> <div id="boxheader"></div> <div id="box3" class="box"></div> </div> </div> <div id="clear"></div> </div> </div> <div id="footer">Content</div>

관련 문제