CSS에서 컨테이너 div를 채우기 위해 테이블을 확장하려면 어떻게해야합니까?

Question

여러 개의 컨테이너 DIV를 생성하여 화면에 공간을 "새겨"각 DIV의 내용을 채우고 싶습니다. 한 가지 경우에, 나는 표를 채울 필요가있다.

표의 가장 안쪽 부분은 jpeg <img>입니다. 어디서나 고정 된 픽셀 크기를 사용하고 싶지 않아 다른 크기의 브라우저에서 내용이 잘 축소됩니다.

인터넷에서 반복되는 시행 착오와 약간의 읽기 끝에 전체 체인 컨테이너 -div-> table-> tbody-> tr-> td-> img 멋지게 크기에 맞게, 나는이 요소들 각각이 다음과 같은 속성을 가지고 있는지 확인해야만한다 : "height:100%; width:100; position:relative" (img 위치 자체는 절대적 일 수있다).

이것은 1 행의 테이블에서만 정상적으로 작동합니다. 하지만 여러 행이있는 경우 행 높이가 부모로부터 naiively 계산됩니다. tbody입니다. 왜냐하면 2 행이 있으면 각 행이 tbody만큼 높기 때문입니다. 그러나 TR의 높이를 수동으로 2로 나눈 후에도 정확하게 컨테이너에 맞지 않습니다.

그래서 어떻게 테이블을 주변 컨테이너로 자동 축소 할 수 있습니까?

<style type="text/css"> 

div { 
border : 2px solid red; 
} 

#bottom-banner { 
height:40%; 
} 

#bottom-banner tbody { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner tr { 
max-height:100%; 
width:100%; 
position:relative; 
height:100%; 
} 


<style type="text/css"> 

div { 
border : 2px solid red; 
} 

#bottom-banner { 
height:40%; 
} 

#bottom-banner tbody { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner tr { 
max-height:100%; 
width:100%; 
position:relative; 
height:100%; 
} 
#bottom-banner table { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner div { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner img { 
height:100%; 
position:absolute; 
right:0; 
left:0; 
margin:auto; 
top:0; 
bottom:0; 
width:auto; 
} 
</style> 

<div id="bottom-banner"> 

<table><tbody> 
<tr> 
<td > 
<div><img src="11a2.jpg"/></div> 
</td> 
</tr> 

<tr> 
<td > 
<div><img src="11a2.jpg"/></div> 
</td> 
</tr> 

</tbody></table> 
</div> 

Answer 1

표의 너비와 높이를 100 %로 설정하기 만하면됩니다. 그러나 셀이 비어있는 경우 표의 상위 div에는 지정된 높이가 지정되어야하며 높이가 지정되지 않은 경우 수직 공간을 차지하지 않습니다. 되지 레이아웃 목적 -

div { width: 100%;height: 500px;border: 5px yellow solid; } 
 
table { width: 100%;height: 100%;border: 3px red double; }

<div> 
 
    <table> 
 
    <tr> 
 
     <td bgcolor="#2062AF"></td> 
 
     <td bgcolor="#05BDB0"></td> 
 
     <td bgcolor="#FEFCC2"></td> 
 
     <td bgcolor="#FAA72A"></td> 
 
     <td bgcolor="#CD3450"></td> 
 
    </tr> 
 
    </table> 
 
</div>