2010-01-27 6 views
2

스크롤 막대가없는 페이지 (높이 : 100 %)를 표시하려고합니다. 이 인수를 html본문에 추가 할 제안을 읽었습니다. 하지만 예상대로 작동하지 않습니다. 실제로 FF에서는 스크롤바가 보이지 않습니다. 그러나 IE7과 8 (표준 모드)에는 스크롤바가 있습니다. 쿼크 모드에서는 예상대로 작동합니다. 당신이 복잡 영토로 얻을 수있는 요구하는지높이 : FF7이 아닌 IE7에서 100 % 문제가 발생했습니다

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
    <!-- saved from url=(0053)http://apptools.com/examples/tables/standardscss.html --> 
    <html><head><title>standards compliance mode with css rendering</title> 
    <meta content="text/html; charset=iso-8859-1" http-equiv=content-type> 
    <meta content=no http-equiv=imagetoolbar> 
    <meta name=mssmarttagspreventparsing content=true> 
    <style type=text/css>body { 
     padding-bottom: 0px; background-color: #fff; margin: 0px; padding-left: 0px; padding-right: 0px; color: #000; padding-top: 0px 
    } 
    table { 
     border-bottom: #008 1px solid; border-left: #008 1px solid; border-top: #008 1px solid; border-right: #008 1px solid 
    } 
    html { 
     height: 100% 
    } 
    body { 
     height: 100% 
    } 
    .fullheight { 
     height:100% 
    } 
    </style> 

    <meta name=generator content="mshtml 8.00.6001.18876"></head> 
    <body> 
    <table width=450 bgcolor=#ccccff align=center height="100%"> 
     <tbody> 
     <tr> 
     <td colspan="2" height="200px"> 
      <p>paragraph</p> 
    </td></tr> 
     <tr class="fullheight"><td > 
     <p>paragraph</p> 
     </td> 
     <td> 
     <p>paragraph</p> 
     </td> 
     </tr> 


     </tbody></table></body></html> 

답변

1

음을 ...하지만 난 당신의 코드에서 불일치를 제거하여 시작 했죠 : 이것 좀 봐 주시기 바랍니다. 예 :

  • 귀하의 테이블은 100 % 높이입니다.
  • 내부, 당신은 200 픽셀 높은 <td> 하나 <tr>
  • 내부 안쪽에, 당신은 또한 그래서 당신은 코드를 이야기하고

<tr>초 높은 100 %를 가지고 100 % + 200 픽셀 = 100 %가. 논리적으로는 실패하지만 가끔씩 코드를 해킹하고 싶을 수도 있습니다.

먼저 논리적으로 작동하도록 코드를 조정하고 코드를 더 단순하게 줄인 다음 속성을 조정하여 성능을 향상 시키십시오. 그 후에 스크롤바가 여전히 나타나면 음수 여백으로 조정을 시작해야 할 것입니다. 이렇게하면 솔직하게 누군가에게 조언하는 사람이 개별 코드 요소에 대해 조언하는 것이 아니라 목표에 대한 분명한 인식을 필요로하는 코드에 "친밀한"결과를 얻을 수 있습니다.

+0

필자는 요소가 _parent_ 컨테이너에서 차지해야하는 높이 비율을 알고 있습니다. 그래서 내 생각은 테이블이 100 % 높이 (몸체)이고, 행의 첫 번째 높이가 200px (테이블의)이고 두 번째 테이블의 나머지 높이 (테이블의 높이)가됩니다. "방정식"이 올바르지 않다면, 기대했던대로 두 번째 행을 얻으려면 어떻게해야합니까? –

+1

대략적인 시각적 평가에서 스크롤 막대가 나타나면 페이지 하단 (예 : 스크롤 영역)에 나타나는 "공간"이 200 픽셀이라고 말할 수 있습니까? – Tom

+0

예, 정확히 (정확히는 아닐 경우) 약 200 픽셀입니다. –

1

문제가 스크롤 인 경우, 당신은 행동을 강제하기 위해 CSS "오버 플로우"속성을 사용할 수 있습니다 볼 수

  • : 오버 플로우가 클리핑되지 않습니다. 요소 상자 밖으로 렌더링됩니다. 이것은 기본값입니다.
  • 숨김 : 오버플로가 잘리고 나머지 콘텐츠는 보이지 않습니다.
  • 스크롤 : 오버플로가 잘리지 만 나머지는 내용을 보려면 스크롤 막대가 추가됩니다.
  • auto : 오버플로가 잘린 경우 스크롤 막대를 추가하여 나머지 콘텐츠를 확인해야합니다.