HTML 테이블 2 행. 1 고정 높이, 1 100 %. 창문 너비보다 큽니다. 왜?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 


    <style type="text/css"> 


    html, body, form, table, tbody, tr { 
     height: 100%; 
     width: 100%; 
     margin: 0px; 
     padding: 0px; 
     border-style: none; 
    } 

    tr#MainTitle 
    { 
     height: 70px; 
    } 

    div#test { 
     height: 100%; 
     background-color: blue; 
    } 

    /* If I remove the 100% here then the scrollbars are removed and the cell still fills the window but the div no longer fills the cell. */ 

    td.MainMenu { 
     background-color: red; 
     height: 100%; 
    } 
</style> 
</head> 
<body> 
<form name="form1" method="post" action="#" id="form1"> 
    <table id="Main"> 
    <tbody> 

     <tr id="MainTitle"> 
      <td>Title</td> 
     </tr>  

     <tr id="MainMenuRow"> 
      <td valign="top" class='MainMenu' id='MainMenu'><div id="test">Test</div></td>  
     </tr> 
    </tbody> 
    </table> 
</form> 
</body> 
</html>

(편집) 문제를 단순화하려고 시도했습니다. 나는 테이블을 가지고있다. 나는 상단 제목 행을 크기로 고정시키고 다음 내용 행은 나머지 화면을 채우기를 원한다.HTML 테이블 2 행. 1 고정 높이, 1 100 %. 창문 너비보다 큽니다. 왜?

콘텐츠 셀 높이가 100 % 인 경우 설정했습니다. 다음 페이지가 창보다 커서 (제목 행의 크기만큼) 아직 자동으로 전환하면 셀이 올바른 크기가됩니다. 창하지만 포함 된 div는 셀을 채우지 않습니다.

무슨 일이야?

출처

2010-03-03 haymansfield

정확하게 레이아웃을 다듬 으려고합니까? 왜냐하면 테이블을 사용하는 것보다 더 나은 해결책이있을 수 있기 때문입니다. 그러나 레이아웃을 정확히하고 싶은지를 말해야합니다. – easwee

좋아, 이제는 내 설명에서 완전히 분명하지는 않았지만 지금 무슨 일이 일어나고 있는지 더 잘 이해하고있다. 첫째, 레거시 레이아웃을 간소화하여 테이블 모양을 제어 할 수 없으며 테스트 div는 내 콘텐츠가있는 곳입니다. 당신이 말했듯이 70px + 100 %를 사용하는 Im은 왜 그렇게 크지 만 하단 셀에 내용이 있어야합니다. 그리고 셀에서 100 %를 제거하면 div의 100 % 높이가 자동으로 저하됩니다. CSS 표준 당. Catch-22 상황과 같습니다. 나는 ie8 표준 모드에서 일하고있다. – haymansfield

내 대답을 다시 확인하십시오 - 나는 이것이 당신이 필요로하는 것과 정확히 같다고 생각합니다. 어쨌든 - 다음 번엔 firefox + firebug를 사용하는 것이 좋습니다. 디버깅하기가 훨씬 쉬워 질 것입니다. – easwee

문제는 코드에서 BODY 요소의 기본 여백으로 인해 발생합니다. BODY가 사용 가능한 공간의 100 %를 차지하도록 지정하고 있지만 기본적으로 BODY 태그는 여백을 추가하여 요소가 사용 가능한 화면 공간의 100 %보다 약간 차지하는 원인이됩니다.

당신은 당신의 체격에 다음을 추가하여이 문제를 해결할 수 있습니다

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

출처

2010-03-03 14:23:11

불행히도 이것은 문제가 아닙니다. 스크롤 영역은 훨씬 크고 맨 위에있는 제목 행의 크기 인 것 같습니다. – haymansfield

어떤 브라우저를 사용하십니까? Firefox에서는이 문제를 해결합니다. IE에는 상자 모델을 다루는 이상한 방법이 있으므로 사용하는 경우 다른 동작이 표시 될 수 있습니다. –

간단합니다. #MainTitle + td.MainMenu = 100 % + 하단의 70px 높이. – easwee

TR 높이 속성을 허용하지 않습니다. td 또는 th 요소에서 설정해야합니다. 이 코드는 작업을 수행해야합니다.

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <style type="text/css"> 
    html, body, form, table {height: 100%;width: 100%;margin: 0px;padding: 0px;border:0;} 
    tr th {height:70px;} 
    tr td {background-color: blue;position:relative;vertical-align:top;} 
    .text {position:relative;height:100%;width:100%;background:yellow;} 
</style> 
</head> 
<body> 
<form name="form1" method="post" action="#" id="form1"> 
    <table id="Main" cellpadding="0" cellspacing="0"> 
     <tr> 
      <th>Title</th> 
     </tr>  
     <tr> 
      <td><div class="text">Test</div></td>  
     </tr> 
    </table> 
</form> 
</body> 
</html>

출처

2010-03-03 15:43:42 easwee

올바른 표 레이아웃을 제공하지만 상위 요소에 할당 된 높이가 없으므로 '테스트'가 포함 된 div가 셀을 채울 수 없으므로 높이가 자동으로 저하되므로 셀을 채울 수 없습니다. – haymansfield

나는 대답을 편집했다. 나는 당신이 내부 div가 필요 없다고 생각했다. 지금 확인해보십시오 - 내부 div가 잘 맞습니다. – easwee

불행히도 이것은 단점 모드에서만 작동합니다. doctype을 표준에 추가하면 더 이상 작동하지 않습니다. – haymansfield

HTML 테이블 2 행. 1 고정 높이, 1 100 %. 창문 너비보다 큽니다. 왜?

답변

관련 문제