HTML, CSS 끈끈한 footer (성장하는 내용)

나는 동적 인 높이 (성장하고있는 내용)가있는 div의 바닥에 끈적 인 바닥 글을 얻으려고 노력하고있다. div는 페이지 중앙에 떠 있어야합니다 (왼쪽과 오른쪽에서 같은 거리).HTML, CSS 끈끈한 footer (성장하는 내용)

나는 HTML 다음 (관련이없는 물건의 제거) 한 :

<html> 
<body> 
    <div class="bodybackground"> 
    <div class="container"><!-- floats in the middle --> 
     <div class="mainContainer"><!-- different color etc --> 
     <!-- content with dynamic height --> 
     </div> 
     <footer class="pagefooter"></footer> 
    </div> 
    </div> 
</body> 
</html>

다음과 같은 CSS는 (또한 관련이없는 물건의 제거) :

는

html { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
body { 
    margin: 0px; 
    height: 100%; 
} 
.bodybackground { 
    height: 100%; 
    min-height: 100%; 
} 

.container { 
    min-height: 100%; 
    display: inline-block; /* needed make it float in the middle of body */ 
    top: 0px; 
    position: relative; 
    padding: 0px; 
    padding-bottom: 158px; /* height of footer */ 
} 
.mainContainer { 
    position: absolute; 
    height: 100%; 
    overflow: auto; 
} 
.pagefooter { 
    position: absolute; 
    bottom: 0px; 
    margin: 0px; 
    padding: 0px; 
    height: 158px; 
}

그러나 mainContainer의 내용이 밖으로 수레 바닥 글이 맨 아래에있는 대신 바닥 글 뒤에서 계속됩니다. 컨테이너의 표시 속성을 변경하도록하는 예제를 제외하고는 모든 것을 시도해 보았습니다. 컨테이너를 중간에 띄우는 것이 필요했습니다.

내가 바보가되는 곳의 단서는 무엇입니까? 감사!!

.push를 사용하여 좀 더 많은 것을 연습해야했지만 문제가 해결되었습니다. 빠른 답변 주셔서 감사합니다!

출처

2013-02-25 tonya_ytzerman

절대 경로를 사용하면 바닥 글과 mainContainer가 놓여질 수 있습니다. 절대 값을 사용하고 바닥 글을 아래쪽으로 설정하면 뷰포트의 아래쪽에만 고정됩니다.

끈적 거리면 필요한 경우 상대 단위와 정확한 높이를 사용해야합니다.

html, body { width:100%; height:100%; } 
#wrap { 
min-height:100%; 
height:auto !important; 
height:100%;  
margin: 0 auto -158px; /* Bottom value must = footer height */ 
} 

.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }

순서는

<div id="wrap"> 
<!--All of your content goes here--> 
<div class="push"></div> 
</div> 
<div class="pagefooter"></div>

그 길을 간다, 바닥 글은 항상 충분한 공간을 가지고 있으며, 하단으로 설정됩니다. 여백 : 자동 줄 바꿈은 자동 줄 바꿈을 중심으로합니다 (너비가 100 %가 아닌 한 인라인없이 가운데에 맞 춥니 다)

출처

2013-02-26 03:16:52

그래서 중심 구성 요소가있는 끈적한 바닥 글을 찾고 있습니다. 가장 쉬운 방법은 하단에 고정 된 위치 요소를 생성하는 것입니다 (기본적으로 지정된 폭과 여백을 가진 div : 자동).

당신은 http://jsfiddle.net/gHDd8/에서 그 예를 볼 수있다 -는 CSS는 기본적으로 HTML이

끈적 끈적한 바닥 글 뷰포트의 하단에 유지

<div class="outerBlockElement"> 
    <p class="innerBlockElement">I am sticky footer text!</p> 
</div>

에 해당

.outerBlockElement { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.innerBlockElement { 
    width: 50%; 
    margin: auto; 
}

입니다, 중심 페이지에서.

출처

2013-02-25 20:58:33

HTML, CSS 끈끈한 footer (성장하는 내용)

답변

관련 문제