방지 사업부 :

스트레칭에서 테이블 셀 I가 다음과 같은 HTML방지 사업부 :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Table-cell issue</title> 
    <style type="text/css"> 
     html, body { height: 100%; } 
     .table 
     { 
      display: table; 
      height: 100%; 
     } 
     .row 
     { 
      display: table-row; 
     } 
     .aside 
     { 
      display: table-cell;   
     } 
     .center 
     { 
      background-color: red; 
      display: table-cell; 
      width: 100%; 
     } 
     .wide 
     { 
      background-color: green; 
      width: 16000px; 
     } 
    </style> 
</head> 
<body> 
    <div class="table"> 
     <div class="row"> 
     <div class="aside"> 
      Left column 
     </div> 
     <div class="center"> 
      <div class="wide">&nbsp;</div> 
     </div> 
     <div class="aside"> 
      Right column 
     </div> 
     </div> 
    </div> 
</body> 
</html>

문제는 div.table가 전체를 차지하기위한 것입니다 동안 div.center, 그 내용에 맞게 뻗어 있다는 것입니다 뷰포트 및 나머지 div.center의 내용은 보이지 않아야합니다. overflow:hidden이나 픽셀 단위의 명시적인 너비 설정 (예 : 900px)이 도움이되지 않습니다.

문제를 해결하는 방법에 대한 아이디어에 대해 매우 감사하게 생각합니다.

출처

2011-02-13 Alexey

테이블 div에 table-layout:fixed을 사용하십시오. 이렇게하면 자동 셀 크기가 조정되지 않고 허용되는 범위만큼 센터가 확대됩니다.

출처

2011-02-13 00:07:59 SpliFF

감사합니다. 완벽하게 작동합니다. 하지만 div.wide가 부모의 신장을 100 % 늘리는 방법을 제안 할 수 있습니까? 'height : 100 %'는 Webkit 브라우저에서만 작동하며'top : 0; bottom : 0;을 사용하여 절대 위치 지정하면'overflow : hidden'에도 불구하고 스크롤됩니다 ... – Alexey

표시되는 문제는 테이블 레이아웃의 고유 한 동작으로 인해 발생합니다 알고리즘. 문제는 HTML4/CSS2가 오버 플로우와 위치 지정이 부모 셀과 상호 작용할 때 일어날 일에 다소 모호합니다. 대부분의 브라우저는 자신의 일을하는 것처럼 보입니다. CSS는 height : 100 %는 부모가 명시적인 높이를 갖는 경우에만 유효하므로'.center'에 고정 높이를 설정하여 시작하십시오. – SpliFF

'table-layout : fixed'는 Safari에서 폭 문제를 일으킬 수 있습니다. – Mike

방지 사업부 :

답변

관련 문제