2014-01-08 1 views
0

마크 업 : html로에서브라우저가 얼마나 높이를 설정합니까?

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <table width="500" border="0"> 
      <tr> 
       <td colspan="2" style="background-color:#FFA500;"> 
        <h1>Main Title of Web Page</h1> 

       </td> 
      </tr> 
      <tr> 
       <td style="background-color:#FFD700;width:100px;"> <b>Menu</b> 
        <br>HTML 
        <br>CSS 
        <br>JavaScript</td> 
       <td style="background-color:#eeeeee;height:200px;width:400px;">Content goes here</td> 
      </tr> 
      <tr> 
       <td colspan="2" style="background-color:#FFA500;text-align:center;">Copyright ? W3Schools.com</td> 
      </tr> 
     </table> 
    </body> 
</html> 

는, 외형 및 수익성의 높이에 대한 어떤 정의도 없다. 브라우저가 얼마나 높이를 설정합니까? 각 브라우저는 자신의 방법으로 테이블을 취급로

enter image description here

+0

레이아웃 용 테이블을 사용하지 마십시오. – bjb568

+0

'F12 '를 눌러 개발자 도구를 열고'계산 된'탭을 선택하십시오. 요소를 선택하면 계산 된 치수가 표시됩니다. – Abhitalks

+0

html이 파이어 폭스에 있다면 어떻게 크롬에서와 같은 것을 볼 수 있습니까? –

답변

0

사용하여 테이블 문제가 많이 발생합니다. 브라우저 기본 스타일을 재설정하고 테이블을 수동으로 스타일을 지정해야합니다. 대신 테이블없이 사용하십시오.

<!DOCTYPE html> 
<html> 
    <body> 
    <div id='header'><h1>Main Title of Web Page</h1></div> 
    <div id='sideBar'> 
     <ul> 
     <li>Menu</li> 
     <li>HTML</li> 
     <li>CSS</li> 
     <li>Other</li> 
     </ul> 
    <div id='pageContainer'> 
     <h2>Content goes here</h2> 
    </div> 
    <div id='footer'>Copyright ? W3Schools.com</div> 
    </body> 
</html> 

이제 CSS를 원하는대로 스타일을 지정할 수 있습니다. 아무것도 명시 적으로 정의되어 있지 않은 경우

+1

다른 브라우저가 테이블 스타일을 결정하는 방법은 실제로 문제가 아닙니다. 또한 목록, 헤드 라인, 양식 요소, ...은 다르게 스타일이 지정됩니다. 이것이 다양한 종류의 css_reset_ 파일이 존재하는 이유입니다.이 파일들은 공통된 모양을 갖기 위해 자신의 CSS 앞에 포함되어 있습니다. 그러나 테이블 형식이 아닌 데이터에 대해서는 테이블을 사용하지 않아야합니다. –

0

가장 간단한 방법으로 귀하의 질문에 대답하려면 ... 브라우저는 ..., 페이지의 내용에 따라보기 포트의 크기를 설정 see this

<div>This is atext</div> 

CSS

html, body { /* height:100%; width:100%; */ margin:0; padding:0; } div { border:1px solid #000; } 
그러나 규 격 치가 html,body에 일단 설정되면 ...이 차지하는 폭은언급 0

html, body { 
    height:100%; /*defined*/ 
    width:100%; /*defined*/ 
    margin:0; 
    padding:0; 
} 
div { 
    border:1px solid #000; 
} 
관련 문제