표가있는 CSS 세로 레이아웃

이미 답변을 드려 죄송하지만 "100 % 높이"로 검색하는 것은 어렵습니다.표가있는 CSS 세로 레이아웃

내 문제는 명백한 이유로 스크립트를 쓰지 않으려는 브라우저의 자동 셀 크기 조정 때문에 100 % 높이의 테이블 레이아웃이 필요하다는 것입니다.

다른 "100 % 문제"와 다른 점은 일부 셀이 상단과 하단에 붙어 있어야하고 나머지는 공간을 채우기 위해 브라우저로 크기가 조정되어야한다는 것입니다.

그런 종류의 작품은 내가 중간 부분에 넘쳐 흐르는 물건을 담을 필요가있을 때 발생하며 분명히 오버플로가 필요합니다. 자동으로 그 물건을 통해 사용자를 활성화 할 수 있습니다. WebKit에서 작동합니다. Firefox에서는 그렇지 않습니다. 테스트되지 않은 다른 사람들. 테스트 케이스가 있습니다.

<html> 
<head> 
    <style> 

     body, html { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     table { 
      height: 100%; 
      width: 200px; 
      border: 0; 
     } 

     .fill { 
      background-color: red; 
     } 

     .cont { 
      overflow: auto; 
      height: 100%; 
     } 

    </style> 

</head> 
<body> 
    <table> 
     <tr> 
      <td style="height:50px"></td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
     <tr> 
      <td class="fill"> 
       <div class="cont"> 
        An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
    </table> 
</body>

출처

2009-10-20 skrat

Demo

당신은 "그것이하지 않는"... 문장을 완료하시기 바랍니다 말한다. –

"Firefox에서는"쉼표 스플 라이스가 아닙니다. Firefox에서는 작동하지 않지만 WebKit 기반 브라우저에서는 작동합니다. –

이것은 표준 헤더 - 본문 - 꼬리말 레이아웃처럼 들리지만 사람들이 CSS를 사용하여 작성한 많은 레이아웃과는 다릅니다. ("sticky footer"로 검색하면 막대기를 흔들 수있는 것보다 더 많은 예제를 얻을 수 있습니다.) 왜 테이블이 필요하다고 생각하니? – Martha

작동이보십시오!

나는

인터넷 익스플로러 7 & 8 (윈도우)
파이어 폭스 3.5 (맥 & 윈도우)
사파리 4.0 (맥 & Windows)를 사용하여 테스트

어쩌면 너비를 변경하고 최소 높이를 픽셀 값으로 늘리 길 원할 것입니다. Source

<html> 
<head> 
    <style> 

     body, html { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     table { 
      height: 100%; 
      width: 200px; 
      border: 0; 
     } 

     .fill { 
      background-color: red; 
     } 

     .cont { 
      position:relative; 
      max-height:100%; 
      min-height:100%; 
      height: 100%; 
     } 

     .cont2 { 
      position:absolute; 
      height: 100%; 
      overflow:auto; 
     } 

    </style> 

</head> 
<body> 
    <table> 
     <tr style="height:50px"> 
      <td style="height:50px">50px</td> 
     </tr> 
     <tr style="height:50px"> 
      <td style="height:100px">100px</td> 
     </tr> 
     <tr> 
      <td class="fill"> 
       <div class="cont"> 
        <div class="cont2"> 
        An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr style="height:50px"> 
      <td style="height:100px">100px</td> 
     </tr> 
    </table> 
</body>

출처

2009-10-27 09:44:12 jantimon

대단히 감사합니다! 자, 당신은 또한 대답 할 수있는 것, 어떻게 상단/하단에 가변 높이 세포와 함께 할 수 있습니까? 즉, 나는 그들의 높이를 모른다. 그러나 나는 그것을 측정 할 수있다. 까다 롭고 나는 그것을 피하고자한다. – skrat

높이를 1px'height : 1px;'로 설정한다. 이것은 효과가있을 수 있습니다. 높이와 최소 높이로 연주하십시오. – jantimon

엄격한 doctype으로 테스트 해 보았는데 좋을 것 같습니다. 더 이상 작동하지 않는 것 같습니다. ( – skrat

표가있는 CSS 세로 레이아웃

답변

관련 문제