바닥 글 높이가 페이지 하단까지 연장되도록합니다.

Question

나는 매우 간단한 웹 페이지를 가지고 있습니다. 그것은 서로의 ontop, 머리글, 내용 다음 바닥 글에 앉아 3 divs ahs.

내 바닥 글 높이가 페이지 하단으로 확장되기를 원합니다. 어떻게해야합니까?

헤더의 높이가 일정하며 내용의 높이는 AJAX 호출에서받은 내용에 따라 다릅니다. 그래서 저는 그것을 명시 적으로 설정할 수 없습니다.

Heres는 내 JSFiddle : 귀하의 경우 가장 쉬운 해결책은 몸 배경 바닥 글과 같은 색하고 콘텐츠를 흰색 할 것 같은 http://jsfiddle.net/5U6ZB/2/embedded/result/

<div id="header"></div> 
<div id="content"> 
    <!-- height is dynamic sometimes it will be full of divs that makes it 
     longer than the screen height other times it only has 1 div --> 
</div> 
<div id="footer"> 
    <!-- How do I make the footer height fill up the rest of the page height? --> 
</div> 

body { background-color: white; } 
div { width: 100%; } 

#header { 
    height: 400px; 
    background-color: RGB(200,200,200); 
} 

#content { 

} 

#footer { 
    background-color: RGB(112,112,112); 
    /*How do I make the footer height fill up the rest of the page height?*/ 
} 

Answer 1

는 소리. 이렇게하면 꼬리말이 맨 아래로가는듯한 착각을 불러 일으 킵니다. 순수 CSS에서

body { background-color:RGB(112,112,112); } 
div { width: 100%; } /* Divs are block elements which automatically take 100% width so this is redundant. */ 

#header { 
    height: 400px; 
    background-color: RGB(200,200,200); 
} 

#content { 
    background-color:white; 
} 

#footer { 
    background-color: RGB(112,112,112); 

} 

Answer 2

, 그것은 불가능하지만, 당신은 몇 가지 멋진 자바 스크립트를 사용하려는 경우, 당신은 동적으로 이미 그것을하지 않는 내용을 가정하고, 나머지 높이를 스트레칭 바닥 글의 높이를 변경할 수 있습니다 당신.

var header = document.getElementById("header"), 
    content = document.getElementById("content"), 
    footer = document.getElementById("footer"), 
    height = window.screen.height - header.clientHeight - content.clientHeight; 

footer.clientHeight = (height < 150) ? 150 : height; // Sets a minimum height of 150px 

일반적으로 SynXsiS의 제안을 따르는 것이 좋습니다. 더 좋은 모양을 나타내는 경향이 있기 때문입니다. 결국, 그것은 당신이 페이지의 룩앤필을 디자인하는 방식에 달려 있습니다.

Answer 3

html { 
background-color:#093; /*the footer color*/ 
} 

body { 

background-color: #f6f; /*the body color*/ 
} 

Answer 4

fayerth와 비슷한 방식으로 브라우저의 크기를 조정할 때 높이를 동적으로 조정합니다 (jQuery 기반).

바닥 글의 크기를 직접 조정하는 대신 추가 빈 요소 <div class="flex-footer">을 추가하고 대신 크기를 조정했습니다. 꼬리말에 많은 요소가 포함되어 있고 꼬리말의 부모와 크기가 같은 하위 항목이 있으면 안되는 효과가 있어야한다고 생각했습니다.

그러면 CSS는 필요한 배경색을 적용해야합니다.

음수 여백에 대한 의견을 남겨주세요. 디자인에 음수 여백이 필요하기 때문에 필자의 경우에는 이것이 필요했습니다. 나는 당신의 경우에도 그 비트를 포함 시켰습니다.

$(function(){ 
     $(window).load(resizeFooter); 
     $(window).resize(resizeFooter); 
    }); 
    // Dynamically resize footer to fill page, IE8 doesn't like this. 
    function resizeFooter() { 
     var windowHeight = window.innerHeight; 
     var headerHeight = $("header").height(); 
     var contentHeight = $("div.main").height(); 
     var footerHeight = $("footer").height(); 
     // 107 references a negative margin in header - you'll need to account for this if necessary 
     var flexFooter = windowHeight - (headerHeight + contentHeight + footerHeight - 107); 
     $(".flex-footer").css("min-height", flexFooter); 
    } 

Answer 5

매우 간단하고, 나 :

바닥 글 {위치를 작동 : 절대; 너비 : 100 %; 상단 : (아래 읽기); }

바닥 글이 화면에서 원하는 일어날 때 그 %가 모든 해상도 :

Answer 6

:root { 
    background-color: siteBackgroundColor; 
} 

body { 
    background-color: footerColor; 
} 

이 정말하지 않습니다에 적용됩니다, 상위 속성 개의 다른 퍼센트 값으로 시도 할 수 있습니다 바닥 글을 확장하지만 시각적으로 배경색을 확장합니다.

Answer 7

저는 WordPress 테마를 조정 중이며 동일한 문제가 있습니다. 하지만 끈적 인 꼬리말을 구현하면 실제로 내용이 부분적으로 사라집니다.Wordpress는 엉망이되어서 왜 이런 일을하는지 잘 모르겠지만 - 필요한 것은 꼬리말을 메인 컨텐츠 아래에 두는 것입니다. 그러나 화면의 나머지 부분을 채워서 짧은 페이지에서는 바보가되지 않도록하십시오.

색상 트릭 이외의 쉬운 CSS 수정에 대한 아이디어가 있으십니까? (내가 할 수있는)

은 클라우디아