CSS : 모든 화면의 페이지 하단에 자동 맞춤에 사업부는

Question

은 기본적으로 내가 현재이 같은이 크기 페이지 하단에 있으므로 사용중인 화면 해상도에 관계없이 하단에 표시됩니다. (I 왜곡되는 이미지를하지 않을 수 그래서 만약.) 검은 배경 사업부는 이미지로 대체됩니다

내가 가지고있는 코드는이 순간 -

HTML

<div id="main-container" class="container"> 

    <img style="width: 100%; height: 100%;" src="http://url.com/test.jpg" alt="" class="alignnone size-full wp-image-37" /> 

</div> 

최대 폭에 대한 모든 CSS를 포함

#main-container { 
    height: 100%; 
    background-color: #000; 
} 

.container { 
    margin-right: auto; 
    margin-left: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

그리고 내가 사용하고 부트 스트랩 :

CSS.

.container { 
    width: 1170px; 
} 

현재 이미지는 페이지 아래쪽으로 지나가지만 브라우저 하단에 포함하고 싶습니다. 이것을 달성하는 가장 좋은 방법은 무엇입니까?

Answer 1

CSS로이 작업을 수행 할 수 없습니다. CSS를 동적으로 수정하려면 자바 스크립트를 사용해야합니다. 크기 조정을 수신하는 데

function setSizes() { 
    "use strict"; 
    var height = ($(window).height() - $("#top").height()) - 5, 
     fancytree_padding_text = $(".fancytree-container").css("padding-top"), 
     get_padding = new RegExp("(.*?)(px)"), 
     fancytree_padding = parseInt(get_padding.exec(fancytree_padding_text)[0], 10); 
    $(".fancytree-container").css("max-height", (height - (fancytree_padding * 2) - 5) + "px"); 
    $(".feeds").css("max-height", height + "px"); 
    $(".details").css("max-height", height + "px"); 
    $(".bottomPadding").css("padding-top", (height - ($(".bottomPadding p").height() + 55)) + "px"); 
setFeedWidths(); 
} 

나는 또한 추가 코드와이를 호출 할 때 문서로드 : :이 같은 것을 사용 아래 표와 무엇

$(function() { 
    "use strict"; 
    setSizes(); 
    $(window).resize(function() { 
     setSizes(); 
    }); 
}