페이지 높이나 div의 비율이 유효하지 않으면 어떻게 되나요?

说 1. 페이지를 점유하고 싶으면 DIV 퍼센티지 문제로 검색도 해보셨을 거라 생각합니다. 즉, 조상 HTML이 퍼센티지를 설정해야 할 때까지 아버지와 아버지를 설정해야 한다는 것입니다 효과적이다.

한마디로: 백분율로 높이를 설정하려면 부모 중 적어도 하나가 고정 높이를 가져야 합니다. 그렇지 않으면 모든 부모가 조상 html에 도달하게 됩니다(html 외부는 브라우저이기 때문입니다). 키가 있음)

백분율을 설정해야 합니다. 물론 position:absolute,fixed와 같이 문서 흐름에서 벗어난 div는 제외해야 합니다. 해당 div의 부모는 브라우저이므로 높이 백분율은 항상 유효합니다. 도달하다.

2. 백분율이 직접 사용되지 않는 경우도 있습니다. 이 경우 height: calc(100% - 1rem); height: calc(50% - 2px)를 사용할 수 있습니다. ); 등, 이 상황에 대한 유효한 조건도 높이 백분율을 사용하기 때문에 첫 번째 지점에서 설명되어야 합니다.

오늘날의 반응형 레이아웃 요구 사항에 따라 크기를 자동으로 조정할 수 있는 많은 요소는 너비 비율에 따라 이미지 높이를 조정하기 위해 {width:50%;height:auto;}를 사용하는 img와 같이 높이-너비 적응형일 수 있습니다. .

그러나 가장 일반적으로 사용되는 태그인 Div는 자동으로 조정할 수 없습니다(부모로부터 상속받거나 자체적으로 px를 지정하거나 백분율을 제공). 그러나 이 백분율은 부모의 높이를 기준으로 계산되며 전혀 그렇지 않습니다. . 요소 자체의 너비, Div의 너비와 높이는 특정 비율에 도달할 수 없습니다 =-=). （이 기능(DIV 높이: 너비 = 1:1)을 달성하려면 다양한 BUFF를 통해 여러 가지 처리 방법이 있다는 것을 알 수 있습니다

1, 적응형

div를 달성하기 위해 div+zoom의 너비 높이를 직접 지정합니다. width:50px;heigth:50px;zoom:1.1;}

이렇게 하면 초기에 동일한 너비와 높이 div를 얻을 수 있지만 제한 사항이 너무 큽니다. 통과합니다!

2, js를 통해 div의 너비를 동적으로 결정하여 height

div{width:50%;}

window.onresize = function(){div.height(div.width);}

을 설정할 수 있습니다. Width 및 Height div도 구현되지만 항상 조금 어색한 느낌이 듭니다. PASS!

3, 너비 및 높이 단위로 설정

div{width:20vw;height:20vw;/*20vw는 뷰포트 너비의 20%입니다*/}

그러나 많은 기기가 이 속성을 지원하지 않으며 호환성도 너무 좋습니다. 불쌍해, 통과!

4, 부동 소수점으로 설정

#aa{배경:#aaa;;}

#bb{배경:#ddd;;float:left}

#cc{배경:#eee;;float:right}

< ;div id="aa">부모 div
　　

하위 div

　

하위 div

　

이것은 명확한 오류에 사용되는 것입니다