div를 페이지(화면 아님) 높이의 100%로 만드는 방법은 무엇입니까?
응용 프로그램이 작동하는 동안 로딩 상자가 전경에 표시되는 동안 CSS를 사용하여 내 페이지에 '회색으로 표시된' 효과를 만들려고 합니다. 나는 자바 스크립트를 통해 가시성을 켜거나 끄는 100% 높이/너비의 반투명 검은색 div를 만들어 이 작업을 수행했습니다. 나는 이것이 충분히 간단할 것이라고 생각했다. 그러나 페이지 콘텐츠가 화면이 스크롤되는 지점까지 확장될 때 페이지 하단으로 스크롤하면 회색으로 표시되지 않은 부분이 나타납니다. 즉, div 높이의 100%는 실제 페이지 크기가 아니라 브라우저 뷰포트 크기에 적용되는 것 같습니다. 페이지 콘텐츠 전체를 포함하도록 div를 확장하려면 어떻게 해야 합니까? 가시성을 토글하기 전에 JQuery .css('height', '100%')를 사용해 보았지만 아무 것도 변경되지 않았습니다.
이것은 문제의 div의 CSS입니다.
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
감사 해요.
당신이 변경하는 경우 position: absolute에 position: fixed그것을 IE6를 제외한 모든 브라우저에서 작동합니다. 이렇게 하면 div가 뷰포트에 고정되므로 스크롤할 때 뷰 밖으로 이동하지 않습니다.
$(document).height()jQuery에서 사용 하여 IE6에서도 작동하도록 할 수 있습니다 . 예
$('.screenMask').height($(document).height());
그렇게 하면 다른 모든 브라우저에서도 문제가 해결될 것이지만 피할 수 있으면 JavaScript를 사용하지 않는 것이 좋습니다. 가로 스크롤이 있는 경우를 대비하여 너비에 대해서도 동일한 작업을 수행해야 합니다.
있습니다 해킹의 많은 주위 만들 IE6에 고정 배치 작업 도하지만 CSS에 다른 제한을 부과하거나, 자바 스크립트를 사용 하나에 그들은 가능성이 문제가 가치가 아니에요, 그래서 그들은 경향이있다.
또한 이 마스크 중 하나만 가지고 있다고 가정하므로 클래스 대신 ID를 사용하는 것이 좋습니다.
질문을 받은 지 한참 뒤에야 이렇게 긴 시간 동안 답변을 하고 있다는 것을 알고 있지만 이 문제로 인해 잠시 당황한 후 여기에 착륙했으며 현재 답변 중 어느 것도 정확하지 않습니다.
정답은 다음과 같습니다.
body {
position: relative;
}
그게 다야! 이제 요소가 <body>뷰포트 가 아닌 상대적으로 배치됩니다 .
position: fixed브라우저 지원이 여전히 부족하기 때문에 나는 신경 쓰지 않을 것입니다 . iOS 5 이전의 Safari는 전혀 지원하지 않았습니다.
당신의 참고 <div>요소가 포함됩니다 <body>의 경계 상자 (상자 + 패딩 + 국경을), 그러나 그것의 마진을 포함하지 않습니다. <div>(예: top: -20px) 에 마이너스 위치를 설정 하거나 <body>의 여백 을 제거 하여 보상합니다 .
또한 더 짧은 페이지에서 부분적으로 가려진 뷰포트로 끝나지 않도록 설정 <body>하는 것이 좋습니다 height: 100%.
이전 답변에서 가져온 두 가지 유효한 포인트. Ben Blank가 말했듯이, 대신 네 모서리를 모두 배치 하여 width및 height선언을 잃을 수 있습니다 . 그리고 이렇게 중요한 단일 요소에는 클래스 대신 ID를 사용해야 한다는 메르카토르의 말이 옳습니다.
이렇게 하면 다음 권장되는 완전한 CSS가 남습니다.
body {
position: relative;
margin: 0;
}
#screenMask {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
그리고 HTML:
<body>
<div id="screenMask"></div>
</body>
이것이 다른 누군가를 돕기를 바랍니다!
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
top, , bottom, left, 를 모두 설정 right하면 높이와 너비가 자동으로 계산됩니다. 경우 screenMask의 직접 자식 <body>요소 표준 박스 모델이 전체 페이지를 다룰 것입니다 (즉, 단점 모드가 트리거되지 않은) 적용됩니다.
오버레이 효과가 있는 팝업을 원하면 이 단계를 사용할 수 있습니다.
<style>
.overlay{
background:#000;
opacity:0.5;
position:fixed;
z-index:1;
width:100%;
height:100%;
}
.popup{
width:500px;
margin:auto;
position:fixed;
z-index:2;
height:300px;
}
</style>
<div class="overlay"></div>
<div class="popup">
Hello everyone
</div>
jQuery를 사용하여 팝업 전에 높이를 설정하는 경우 JavaScript를 더 추가하는 것이 좋습니다. :)
div의 높이를 document.body의 scrollHeight로 설정할 수 있습니다. 이렇게 하면 본문 전체를 덮어야 합니다. 아래에 무언가가 자라기로 결정한 경우에 대비하여 몸을 계속 덮고 있는지 확인하기 위해 몇 가지 트릭을 추가해야 합니다.
ReferenceURL : https://stackoverflow.com/questions/1003613/how-to-make-a-div-100-of-page-not-screen-height
'IT이야기' 카테고리의 다른 글
| 헤더에 대한 "../include/header.h"와 같은 상대 경로의 이점 (0) | 2021.10.06 |
|---|---|
| IEnumerable을 IEnumerable로 변환/캐스트 (0) | 2021.10.06 |
| 사전의 크기를 제한하는 방법 (0) | 2021.10.06 |
| cmd에서 stderr로 메시지를 보내려면.. (0) | 2021.10.05 |
| OpenMP와 파이썬 (0) | 2021.10.05 |