최소 높이의 고정 된 하단 막대

https://www.google.com/의 트릭을 이해하려고합니다.최소 높이의 고정 된 하단 막대

하단 막대는 position: absolute; bottom: 0;이지만 창 높이를 최소화하면 로고/입력 아래에 유지됩니다 ("스택").

물론 이것은 js와 함께 할 수있는 것이지만 순수 CSS가있는 것입니까? 제 질문은이 "스택 효과"를 생성 할 수있는 CSS 트릭이 있습니까? 그렇다면 어떻게 수행 할 수 있습니까?

<span>Google Logo</span> <div>Bottom bar</div>이 트릭을하면 이해할 수 있었지만 아무 것도 할 수 없었습니다.

2013-11-27 Diolor

이렇게의 깨끗한 방법은 꼬리말 높이와 동일 본체에 아래쪽 여백을 설정하는 것이다.

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html>

여기이 방법의 예 :

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
}

그리고 HTML :

은 여기 CSS의 http://mystrd.at/data/sticky_footer.html

출처

2013-11-27 04:53:20 sarahholden

변위를 적용하기 위해 padding-bottom 값을 꼬리말 높이와 같게 설정했기 때문입니다.

.content { 
    padding-bottom: 35px; 
}

보기는 .. padding-bottom:35px = height:35px

#footer { 
    bottom: 0; 
    font-size: 10pt; 
    height: 35px; 
    position: absolute; 
    width: 100%; 
}

출처

2013-11-27 04:35:38

예. 내 질문은 그것이 절대/하단 0있다지만, 당신은 (말) 300px 높이로 윈도우를 크기를 조정할 때 보이지 않는 것입니다. 그러나 485px 이상으로 "움직이는"것을 시작합니다. 그것은 #viewport에'position : relative;'이 있기 때문입니까? – Diolor

흥미로운 접근법. 감사. – Diolor

최소 높이의 고정 된 하단 막대

답변

관련 문제