높이 : 스크롤 할 수있는 페이지에서 100 %

Question

블로그 페이지를 만들 때 사용 가능한 너비와 높이의 100 %를 차지하는 DIV가 필요합니다.

Height : 100%을 사용해도 DIV는 보이는 영역 만 차지합니다. 따라서 화면 해상도가 1920x1080이고 웹 사이트가 900x16000 크기 인 경우 .... 높이 : 100 %는 1080 만 제공합니다. 게시하기 전에 여기에서 많은 답변을 보았지만 제대로 작동하지는 못했습니다.

CSS :

#parent 
{ 
    position : absolute; 
    background: green;   
    height : 100%; 
    width : 100%; 
} 
.child 
{ 
    position: relative; 
    float:left; 
    background: red; 
    height : 400px; 
    width : 500px; 
    border : 1px solid yellow; 
    margin: 10px 10px 10px 10px; 
} 

HTML :

<div id="parent"> 
    <div class="child"> Some text </div> 
    <div class="child"> Some text </div> 
    <div class="child"> Some text </div> 
    <div class="child"> Some text </div> 
    <div class="child"> Some text </div> 
</div> 
​ 

이 JSFiddle를 살펴 보자 : http://jsfiddle.net/acJVw/21/은 내가 필요한 것은 녹색 영역의 맨 아래까지, 모든 사용 가능한 공간을 차지한다는 것입니다 (스크롤 가능) 페이지. 편집 :

편집 : 답변이 아닌 그라데이션 배경으로, 나는 제공된 예로 작업하기 때문에 질문을 약간 변경해야합니다. 다음은 그래디언트와 최소 높이가있는 새로운 JSFiddle입니다. http://jsfiddle.net/acJVw/27/

그래디언트로 페이지 아래쪽으로 갈 수는 없지만 그만!

Answer 1

높이 대신 최소 높이를 사용하십시오. 콘텐츠의 공간을 차지할 정도로 보이는 화면보다 커집니다. 이 fiddle

<div id="parent"> 
<div class="child"> Some text </div> 
<div class="child"> Some text </div> 
<div class="child"> Some text </div> 
<div class="child"> Some text </div> 
</div> 

과 CSS

#parent 
{ 
position : absolute; 
background: green;   
min-height : 100%; 
width : 100%; 
} 
.child 
{ 
position: relative; 
float:left; 
background: red; 
height : 100px; 
width : 500px; 
border : 1px solid yellow; 
margin: 10px 10px 10px 10px; 
} 

편집을 살펴보십시오 : 귀하의 콘텐츠가 화면 너비보다 큰 경우 다음 당신은 또한 시도 할 수

분 - 폭 : 100 %;

질문 편집은 최소 높이 사용하지 않았기 때문에 귀하의 그라데이션이 중지 후 :. 당신의 fiddle 100 % 시도해보십시오이 fiddle

Answer 2

시도해보십시오.

내 화면에 100 % 걸립니까?

<style> 
* { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
#parent 
{ 
    position : absolute; 
    background: green;   
    min-height: 100%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 

} 
.child 
{ 
    position: relative; 
    float:left; 
    background: red; 
    height : 100px; 
    width : 500px; 
    border : 1px solid yellow; 
    margin: 10px 10px 10px 10px; 
} 
​ 
</style> 

<div id="parent"> 
    <div class="child"> Some text </div> 
    <div class="child"> Some text </div> 
    <div class="child"> Some text </div> 
    <div class="child"> Some text </div> 
</div>