CSS - 부모 요소의 남은 공간/사용 가능한 공간의 100 %까지 강제 확장하는 방법?

이것은 정말로 아마추어적인 질문 인 것 같습니다. 제 의견으로는 그래도 여전히 좌절스러운 예외입니다.CSS - 부모 요소의 남은 공간/사용 가능한 공간의 100 %까지 강제 확장하는 방법?

이것은 실제로 2 부분 문제의 두 번째 부분입니다. 첫 번째 부분은 부모 객체의 높이를 100 % 늘리는 요소 가져 오기와 관련된 다소 일반적인 방법입니다. 나는 그것의 부모 요소 내의 모든 수직 공간을 채우기 위해 여기에 각 요소를 원하는

<body>  
<div id="sbcontainer"> 
    DIV 1 
    <div id="sbcontent"> 
     DIV 2 
     <table id="sbmaintable" cellspacing="0"> 
      <tr> 
       <td> 
        TABLE 
       </td> 
      </tr> 
     </table> <!-- END MAINTABLE --> 
    </div> <!-- END CONTENT --> 
</div> <!-- END CONTAINER --> 
</body>

: 내 데모에서는, 나는 다음과 같은 HTML이있다. enter image description here

으로 다음과 같이

min-height: 100%; 
height: auto !important; 
height: 100%;

결과가 있었다 : 나는 (그 BODY 및 HTML도 내 데모 100 % 높이로 설정되어 있습니다) 각 요소에 다음과 같은 스타일을 사용 시도 당신은 볼 수 있습니다, 가장 바깥 쪽 DIV는 100 % 높이 속성을 따랐지만 나머지는 그렇지 않았습니다. 이미지 노트에 암시되었지만 실제로이 이미지에 표시되지 않았지만, 내 안에 TABLE이 100 % 높이로 확장되는지 확인하기 위해 두 번째 DIV (빨간색 테두리)를 400px의 고정 높이로 설정해 보았습니다. 여전히 그렇지 않았습니다.

enter image description here

당신이 이미지에서 볼 수 있듯이 :

나는 그때 각 요소에서 height:auto;을 제거한 경우, 그들은하지만 원치 않는 부작용으로, 100 % 높이 속성을 따를 것을 발견 , 각 요소는 이제 부모 요소의 높이의 100 %가되어 바닥이 부모의 경계를 넘어서 확장되도록합니다. (첫 번째 예에서도 녹색 테두리가있는 가장 바깥 쪽의 DIV는 원하는 것보다 더 멀리 확장되었으므로 페이지에 다른 형제 DIV가 있기 때문에). 참고 : 더 자세히 살펴보면 blue TABLE 요소가 실제로 빨간색 DIV 부모와 같은 높이가 아니지만 경계를 넘어 확장되었음을 알 수 있습니다. 이것이 어떤 의미인지 확실하지 않지만 주목합니다.

하나는 으로 생각하면은 쉽게 해결할 수 있다고 생각하지만 내 노력에도 불구하고 성공하지 못했습니다.

height:auto; 만 유지하고 100% 속성을 제거하면 전혀 늘리지 않습니다.

Google 및 StackOverflow를 통해이 문제에 대한 해결책을 모색했지만 많은 사이트에서 100 % 높이 문제를 다루었지만 실제 솔루션을 찾지 못했습니다.

현재 Firefox에서 테스트 중입니다.

출처

2011-10-15 vertigoelectric

결과가 예상됩니다. 'height : 100 %'는 '부모 요소의 높이'를 의미합니다. 부모 요소에 내용을 추가하면 자식 요소 (부모 요소의 높이가 여전히 있음)가 적절히 아래로 이동합니다 (http://jsfiddle.net/blineberry/rtC9H/ 참조). 'height : 100 %'를 사용하여 얻으려는 효과에 대해 설명하면 도움이 될 것입니다. 이미지인가요? 그림 물감? 그것을 성취 할 다른 방법이있을 수 있습니다. 또한, 참조하십시오 : http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screenspace – Brent

@ 브렌트 - 나는 그것이 왜 일어나는 지 깨닫습니다. 그것은 결코 나에게 신비가 아니었다. 내가 찾고있는 것은 그것을 피하는 방법이다.정적 인 그림을 사용하지 않고 상위 요소 내의 나머지 공간을 채우기에 충분하도록 요소를 확장하는 적절한 방법을 찾고 있습니다. 또한, 제 질문은 일반적인 것이 었습니다. 즉, 현재 내가 필요로하는 구체적인 것은 아무것도 없다는 것을 의미합니다. 사실, 완전히 사실이 아닙니다. 나는 이것을 필요로하는 프로젝트가있다. 내 게시물 (DIV> DIV> TABLE)의 예제와 같은 구조가 될 것입니다. – vertigoelectric

절대 위치 지정을 사용할 수 있습니다.

#b { 
    width: 40em; 
    height: 20em; 
    position:relative; 
    background: red; 
} 
#c { 
    position: absolute; 
    top: 1em; 
    bottom: 1em; 
    left: 1em; 
    right: 1em; 
    background: blue; 
} 

<div id="b"> 
    <div id="c"> 
    </div> 
</div>

출처

2011-10-15 18:32:39 LaC

Genius. 당연하지. 과거에는 항상 다른 요소와 절대 멀리 떨어져 있다고 생각했지만, 실제로는 부모 요소 내에서 절대적으로 절대적으로 사실이라는 것을 배웠습니다. 'position : absolute'를'bottom : 0px'로 설정하면 각각의 중첩 된 요소에 대해 정확히 원하는 결과를 얻었습니다. 정말 고맙습니다. – vertigoelectric

http://stackoverflow.com/questions/10141148/css-two-column-div-layout-misaligns-when-zoom-changes에 응답 해 주시겠습니까? – Lijo

다음은 디스플레이를 사용하는 요소에서 제대로 작동하지 않습니다. table, display : table-row, display : 표를 비롯한 표 셀 속성. – u353

CSS - 부모 요소의 남은 공간/사용 가능한 공간의 100 %까지 강제 확장하는 방법?

답변

관련 문제