웹 페이지 요소의 비율 길이

웹 페이지에서 요소의 배율 길이를 설정할 때는 먼저 해당 요소의 모든 부모 요소의 길이를 설정해야 합니다.예를 들어 다음 코드에서는 div 높이를 100%로 설정할 수 없습니다.

<html>
<head>
  <style type="text/css">
  div {
    height: 100%;
    background: green;
  }
  </style>
</head>
<body>
  <div>Hello This!</div>
</body>
</html>

이것은div의 부원소인 html과body의 높이가 설정되지 않았기 때문이다.높이를 설정하지 않은 요소의 기본 크기는 auto입니다. 즉, 하위 요소의 크기에 따라 자동으로 조정됩니다.따라서 현재 div의 높이를 100%로 지정하면 적용될 수 없습니다.다음과 같은 향상된 방법이 적절합니다.

<html>
<head>
  <style type="text/css">
  html, body {
    height: 100%;
  }
  div {
    height: 100%;
    background: green;
  }
  </style>
</head>
<body>
  <div>Hello This!</div>
</body>
</html>

또한 IE6와 IE8은 웹 페이지에 포함된 textarea 요소를 엄격한 모드로 표시할 때(예를 들어 HTML5 문서의 경우) 상기 방법에 따라 처리하여도 textarea의 비례 높이를 정상적으로 표시할 수 없다.이 문제는 현재 해결 방법을 찾지 못해 당분간 CSS hack으로 해결할 수밖에 없다.
참조 자료:
[1] CSS height 속성 [2] css 최소 높이를 설정하고 적응합니다 [3] Textarea 100% height in IE [4] Percentage Height HTML 5/CSS [5] Conditional comments
[YAML] Date: 2011-05-15 14:54:09

웹 페이지 요소의 비율 길이

좋은 웹페이지 즐겨찾기