브라우저 높이를 채우기 위해 페이지 섹션을 얻으려고합니다. 모든 요소에 100 높이를 적용하려고 시도했지만 작동하지 않습니다. 내가 100mh의 높이로 설정하면 효과가있다. 그러나 내가 원하는 방식이 아니기 때문에 나는 무엇이 잘못되었는지 궁금해한다.페이지 섹션을 browserheight로 채우십시오.
사이트 : Svenssonsbild.se/Konsthandel 두 번째 및 세 번째 메뉴는 spagesection에 대한 앵커 링크입니다.
설정 height:100%은 부모 요소 높이의 100 %를 의미하므로 부모 요소의 높이를 지정해야 작동합니다. 브라우저의 높이의 100 %에 요소를 설정하려면
, 당신은 %의 높이를 가지고있는 <body> 태그에 확인 모든 부모 요소를 확인해야합니다.
나는 더 깊은 폭력 지원을 원했던 100vh beacuse를 사용하고 싶지 않았다. 어쨌든, 나는 모든 요소에 100 % 높이로 운동을했다. 나는 이것을 막아 준 플러그인을 가지고 있었다. 모든 답장을 보내 주셔서 감사합니다! – user2059370
요소의 CSS 높이를 100vh로 설정하면 의도 한대로 정확하게 수행 할 수 있습니다. 100vh은 요소가 항상 뷰포트의 전체 높이가되도록 지정하므로 설명하지 않은 다른 요구 사항이 없으면 이것이 수행해야하는 작업입니다. 나는 당신의 질문에 더 많은 것이 있다면 "나는 갖고 싶다.
콘텐츠에 따라 height 속성 대신 min-height 속성을 설정하는 것이 좋습니다. 콘텐츠에 사용 가능한 뷰포트 크기보다 많은 공간이 필요할 수 있기 때문입니다. 또는 단면의 높이를 계산하여 뷰포트 높이와 비교할 수 있습니다. jQuery를 사용하면 다음과 같이 작동 할 수 있습니다.
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
필요에 맞게 선택기를 조정해야 할 수도 있습니다.
100vh는 이것을 훨씬 쉽게 수행 할 수있는 가장 쉬운 방법입니다. – Max
JavaScript가 최선의 해결책입니다. 사용자 화면의 높이를 가져와 해당 높이를 채우도록 요소를 설정합니다. –