CSS div를 창의 100 %로 늘리는 방법

이 문제를 해결하는 데 어려움이 있습니다. div content1 및 content2에 최소 높이가 설정된 창에서 나머지 공간을 세로로 채우고 싶습니다. 여기 CSS div를 창의 100 %로 늘리는 방법

<style type="text/css"> 
body,td,th { 
    font-family: Arial, Helvetica, sans-serif; 
    height:100%; 
} 
body { 
    background-color: #E1E1E1; 
} 
</style> 
<style type="text/css"> 
.container { 
    width: 965px; 
    height: 100%; 
    margin: 0 auto; 
    overflow: hidden; 
} 
.sidebar1 { 
    float: left; 
    width: 200px; 
    background: none; 
    padding-bottom: 10px; 
} .content { 
    padding: 10px 0; 
    width: 380px; 
    height: 100%; 
    background: #fff; 
    float: left; 
    position: relative; 
} .content2 { 
    float: left; 
    width: 380px; 
    height: 100%; 
    background: #fff; 
    padding: 10px 0; 
} 
--> 
</style>

내가 크기를 조정하기 위해 노력하고있어 div가 있습니다 (현재 비어하지만 수직 창을 채우기 위해 그들을 싶습니다) :

<div class="content" style="border-left: solid 1px #CCC;"></div> 
<div class="content2"><!-- end .sidebar2 --></div>

출처

2011-02-02 methuselah

당신은 html 태그로 100 % 높이를 필요 잘

html { height: 100%; }

참조 : http://jsfiddle.net/wJ73v/

출처

2011-02-02 04:12:25 Petah

이 아니 – methuselah

:-(작업 그것은 내가 데모에 대한 추가 jsfiddle을보고, 난 그냥 모든 브라우저에서 – Mahima

@jeansymolanza 그것을 시험 작동합니다. – Petah

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Foo</title> 
     <style> 
      html {height: 100%;} 
      body {height: 100%; margin: 0; padding: 0;} 
      div {border: 1px solid #000; height: 100%; float: left;} 
     </style> 
    </head> 
    <body> 
     <div id="foo">a</div> 
     <div id="bar">b</div> 
    </body> 
</html>

적절한 DOCTYPE이 필요하다고 생각합니다. 그렇지 않으면 브라우저가 소위 쿼크 모드로 전환하기 때문입니다.

출처

2011-02-02 07:26:22 Harri

CSS div를 창의 100 %로 늘리는 방법

답변

관련 문제