CSS에서 height:100%를 조작하는 방법;-CSS 튜토리얼-php.cn

CSS에서 height:100%를 조작하는 방법;

巴扎黑

풀어 주다： 2017-06-28 10:02:10

원래의

1573명이 탐색했습니다.

페이지 요소의 높이를 100%로 설정하면 요소가 브라우저 창의 전체 높이를 채울 것으로 예상하지만 대부분의 경우 이 접근 방식은 효과가 없습니다. 이유를 아시나요? ); 글꼴 스타일:inherit; margin:0px 5px; 1.6; 공백:nowrap; background-color:rgb(248,248,248)">높이:100%가 작동하지 않나요? height:100%不起作用吗？

按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个p元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。

而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个p的高度设定为height: 50%;

상식에 따르면 CSS height속성을 사용하여 요소, 이 요소는 설정에 따라 브라우저의 수직 공간에서 해당 공간 거리를 확장해야 합니다. 예를 들어 221,221,221); 글꼴 스타일:inherit; margin:0px 5px; :1.6; 공백:nowrap; background-color:rgb(248,248,248)">p 요소의 CSS는


 100px;

이면 페이지의 수직 공간에서 100px 높이를 차지해야 합니다. 🎜🎜W3C 사양에 따라 이 요소의 상위 요소 컨테이너 높이에 따라 백분율 높이를 설정해야 합니다. 따라서 rgb(221,221,221);font-style:inherit; margin:0px 2px; line-height:1.6; white-space:nowrap; background-color:rgb(248,248,248)">p의 높이는


 50%;

이고 상위 요소의 높이가 100px인 경우 이 p의 높이는 50px이어야 합니다. 🎜

그렇다면 height:100%;가 작동하지 않는 이유

페이지를 디자인하고 그 안에 p元素，你希望它占满整个窗口高度，最自然的做法，你会给这个p添加height: 100%;的css属性。然而，如果你要是设置宽度为<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 100%;를 배치하면 이 요소의 너비가 창의 전체 가로 너비로 즉시 확장됩니다. 키도 마찬가지인가요?

틀렸어요.

그 이유를 이해하려면 브라우저가 높이와 너비를 계산하는 방법을 이해해야 합니다. 웹 브라우저는 유효 너비를 계산할 때 브라우저 창의 열린 너비를 고려합니다. 너비에 대한 기본값을 설정하지 않으면 브라우저는 전체 가로 너비를 채우도록 페이지 콘텐츠를 자동으로 타일링합니다.

하지만 키 계산 방법은 전혀 다릅니다. 실제로 브라우저는 콘텐츠가 뷰포트의 범위를 초과하지 않는 한 콘텐츠의 높이를 전혀 계산하지 않습니다(스크롤 막대가 나타남). 또는 전체 페이지의 절대 높이를 설정합니다. 그렇지 않으면 브라우저는 단순히 콘텐츠를 쌓아두게 되며 페이지 높이를 전혀 고려할 필요가 없게 됩니다.

페이지에는 기본 높이 값이 없기 때문에 요소의 높이를 백분율 높이로 설정하면 상위 요소의 높이를 얻을 수 없으므로 자체 높이를 계산할 수 없습니다. 즉, 상위 요소의 높이는 단지 기본값입니다: serif,serif; border:1px solid rgb(221,221,221);font-style:inherit; 0px 2px; 윤곽선:0px; 수직 정렬: 기준선: 공백:rgb(248,248,248)">높이 자동;. 이러한 기본값을 기준으로 높이 백분율을 계산하도록 브라우저에 요청하면 정의되지 않음 즉, null 값은 브라우저가 이 값에 어떤 식으로든 반응하지 않습니다. height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

上面的演示例子是父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%。

那么，如果想让一个元素的百分比高度height: 100%;

🎜위의 데모 예는 상위 요소가 고정 높이를 설정하지 않으므로 하위 요소의 높이가 element

높이:
 100%

도 작동하지 않습니다. 하위 요소의 높이가 상위 요소의 배경색에 따라 결정되는지 여부를 판단할 수 있습니다. -serif,serif; border:1px solid rgb(221,221,221); :inherit; 여백:0px; 패딩:0px 5px; line-height:1.6; background-color:rgb(248,248,248). 🎜🎜그래서 요소의 높이 백분율을 설정하려면

높이:
 100%;

가 작동하려면 이 요소의 모든 상위 요소 높이에 대해 유효한 값을 설정해야 합니다. 즉, 다음을 수행해야 합니다: 🎜

<html>
  <body>
    <p style="height: 100%;">
      <p>
        想让这个p高度为 100% 。      </p>
    </p>
  </body></html>

로그인 후 복사

이제 이 솔리드 rgb(221,221,221);font-style:inherit; margin:0px 2px; ; line-height:1.6 ; white-space:nowrap; background-color:rgb(248,248,248)">p의 높이는 100%이며 두 개의 상위 요소가 있습니다.. p 백분율 높이가 작동하려면 <body> 및 <html> 키. <code style="font-family:微软雅黑,"Microsoft YaHei","Hiragino Sans GB",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif,serif; border:1px solid rgb(221,221,221); font-size:12.6px; font-style:inherit; font-weight:inherit; margin:0px 2px; outline:0px; padding:0px 5px; vertical-align:baseline; line-height:1.6; white-space:nowrap; background-color:rgb(248,248,248)">p的高度为100%，它有两个父元素<body>和<html>。为了让你的p的百分比高度能起作用，你必须设定<body>和<html>的高度。

<html style="height: 100%;">
  <body style="height: 100%;">
    <p style="height: 100%;">
      <p>
        这样这个p的高度就会100%了      </p>
    </p>
  </body></html>

로그인 후 복사


从这个演示中你可以看出，height:
 100%;起作用了。
在使用height:
 100%;rrreee


이 데모에서 볼 수 있듯이 높이
 100%;작동합니다. 
사용 중
 100%;주의해야 할 사항🎜🎜1. 여백과 패딩으로 인해 페이지에 스크롤 막대가 나타나게 되는데, 이는 원하는 결과가 아닐 수 있습니다. 🎜
2. 요소의 실제 높이가 설정한 높이 백분율보다 크면 요소 높이가 자동으로 확장됩니다. 
위 내용은 CSS에서 height:100%를 조작하는 방법;의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!