2 열 절대 레이아웃 모두 100 % 높이가 필요합니다.

나는 아래 의미가 무엇인지 보여주기 위해 레이아웃을 단순화했습니다. 두 열 모두 100 % 일 필요는 있지만 문제는 1 열에 스크롤 막대를 생성하는 높이가 100 % 아래로 늘어나는 콘텐츠가있는 경우 다른 하나는 창 높이가 100 %로 유지됩니다. div가 항상 문서의 전체 높이를 차지하도록하는 방법이 있습니까? 아래 html로 작업하면 아래로 스크롤 할 때 왼쪽 열의 높이가 창의 원래 높이로 유지된다는 것을 알 수 있습니다. 거기에 자바 스크립트 없이이 솔루션이 있습니까? 감사!2 열 절대 레이아웃 모두 100 % 높이가 필요합니다.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    html,body { 
     min-height: 100%; 
    } 

    * { 
     margin: 0; 
     padding: 0; 
    } 

    .column { 
     min-height: 100%; 
     background: red; 
     position: absolute; 
     width: 200px; 
    } 

    #left { 

     left: 100px; 
    } 

    #right { 
     left: 400px; 
    } 

    #content { 
     /* This height will be unknown. 2000px is just for example to push right column down*/ 
       height: 2000px; 
    } 

</style> 
</head> 
<body> 
<div id="left" class="column"></div> 
<div id="right" class="column"> 
    <div id="content"></div> 
</div> 
</body> 
</html>

출처

2012-11-14 uguMark

이 Css-

.column { 
     height: 100%; 
     background: red; 
     position: absolute; 
     width: 200px; 
    } 

#left { 

    left: 100px; 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; 
} 

#right { 
    left: 400px; 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; 
}

작업 Fiddle- http://jsfiddle.net/vR4eU/

와 함께 시도 왜 작동 : 두 사업부의의는 패딩 바닥을 추가하여 매우 긴 보면 우리가 만드는

: 1000px 다음 margin-bottom : -1000px를 사용하여 브라우저가 사실이 아님을 속이십시오. 해결책을 더 잘 설명하는 blog을 참조하십시오.

업데이트 : 아마 Faux columns 당신을 도울 수있는 더 나은 크로스 브라우저 호환 방법입니다. 이것을 참조하십시오 : http://www.alistapart.com/articles/fauxcolumns/

출처

2012-11-14 09:28:44 Cdeez

콘텐츠의 높이를 알고 있지만 높이를 조정해야하는 경우 작동합니다. 내용에 대한 2000px 높이는 오른쪽 열을 아래로 밀어내는 것일뿐입니다. – uguMark

맞을지도 모르지만 한 열의 내용이 창 높이 100 %를 초과하여 유지하더라도 div가 모두 동일한 높이가 되길 원했습니다. 내가 맞습니까? – Cdeez

다른 솔루션에 대한 의견을 보면 오른쪽 열의 내용이 100 % 높이를 초과하지 않아야한다는 것을 의미한다고 생각합니다. 그렇지? – Cdeez

단지 높이를 밀고있는 내용이라면 최대 높이 : 100 %로 설정하거나 오버 플로우 : 숨김으로 문제를 해결하면 해결할 수 있습니다.

출처

2012-11-14 09:31:33 Quinny

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body, html { 
    height: 100%; /* make it fill up the screen, when content longer than 100%, will cause overflow as expected */ 
} 

.wrapper { 
    min-height: 100%; /* we don't want overflow in this layer. so make it flexible */ 
    position: relative; 
} 

.column { 
    border: 4px red dashed; /* to see the moving of the block when scroll. */ 
    width: 200px; 
} 

#left { 
    /* this need to be always the same height of .wrapper, which is at least 100% in height. */ 
    position: absolute; 
    top: 0;  
    bottom: 0; 
    left: 100px; 
} 

#content { 
    /* this can have any height you want it will change the height of .wrapper when it grows. but you can't use percent unit! */ 
    margin-left: 400px; 
    min-height: 600px; 
} 

</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div id="left" class="column"></div> 
    <div id="content" class="column"></div> 
</div> 
</body> 
</html>

이 모든 현대적인 브라우저에서 작동합니다 (IE7 그것이 IE9의 IE7 모드에서 잘 작동을 통해이, 최소 높이를 지원하지 않습니다에 대한.이 버전 작업 previous one을 체크 아웃 할 수 있습니다). 이 솔루션을 사용하면 왼쪽 열이 항상 .wrapper의 높이를 유지하게되어 내부 콘텐츠의 높이에 자동으로 맞춰지고 #content의 높이에 관계없이 최소 높이를 100 % 유지합니다.

보기 demo.

배경이나 테두리를 오른쪽으로 표시하는 것과 같은 시각적 효과가 필요한 경우 콘텐츠가 높이가 100 % 이상 늘어난 것처럼 보입니다. #left과 같은 다른 꾸미기 상자를 사용하여 #content 뒤에 놓을 수 있습니다. 어떤 시각적으로 귀하의 필요를 만족하고 어떤 스크립트 XD를 작성하지 않아도됩니다. 이것을 위해

을 보시려면 demo을보십시오.

출처

2012-11-14 09:32:10 xiaoyi

고맙습니다. 문제는 항상 문서의 100 % 높이가되어야한다는 것입니다.솔루션에서 콘텐츠가 10 픽셀 높이로 설정되면 열은 해당 높이로 바뀝니다 – uguMark

@ugu '완벽한'솔루션이 제공됩니다. – xiaoyi

2 열 절대 레이아웃 모두 100 % 높이가 필요합니다.

답변

관련 문제