Div 오버레이를 전체 페이지 (뷰포트뿐만 아니라)로 만드시겠습니까?
그래서 제 생각에 꽤 흔한 문제가 있지만 아직 좋은 해결책을 찾지 못했습니다. 오버레이 div가 뷰포트뿐만 아니라 전체 페이지를 덮도록 만들고 싶습니다. 나는 이것이 왜 그렇게 어려운지 이해하지 못한다. 나는 body, html 높이를 100 % 등으로 설정하려고 시도했지만 작동하지 않는다. 지금까지 내가 가지고있는 것은 다음과 같습니다.
<html>
<head>
<style type="text/css">
.OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative;">
<div style="height: 100px; width: 300px; background-color: Red;">
</div>
<div style="height: 230px; width: 9000px; background-color: Green;">
</div>
<div style="height: 900px; width: 200px; background-color: Blue;"></div>
<div class="OverLay">TestTest!</div>
</div>
</body>
</html>
나는 또한 자바 스크립트의 솔루션이 존재한다면 개방적이지만 오히려 단순한 CSS를 사용하는 편이 낫습니다.
뷰포트가 중요하지만 스크롤하는 동안에도 전체 웹 사이트가 어둡게 유지되기를 원할 것입니다. 이를 위해 position:fixed대신 position:absolute. 고정은 스크롤 할 때 화면에서 요소를 정적으로 유지하여 몸 전체가 어두워지는 인상을줍니다.
예 : http://jsbin.com/okabo3/edit
div.fadeMe {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
<body>
<div class="fadeMe"></div>
<p>A bunch of content here...</p>
</body>
body:before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
우선 뷰포트가 무엇인지 오해했다고 생각합니다. 뷰포트는 브라우저가 웹 페이지를 렌더링하는 데 사용하는 영역이며, 어떤 식 으로든이 영역을 재정의하도록 웹 사이트를 구축 할 수 없습니다.
둘째, overlay-div가 전체 뷰포트를 덮지 않는 이유는 BODY 및 HTML의 모든 여백을 제거해야하기 때문인 것 같습니다.
스타일 시트 상단에 추가해보세요. 모든 요소의 여백과 패딩이 재설정됩니다. 추가 개발을 더 쉽게 만듭니다.
* { margin: 0; padding: 0; }
편집 : 방금 귀하의 질문을 더 잘 이해했습니다. Position: fixed; Jonathan Sampson이 쓴 것처럼 아마 당신을 위해 잘 될 것입니다.
위의 Nate Barr의 답변을 보았습니다. 단순한 것과 크게 다르지 않은 것 같습니다.
html {background-color: grey}
참고URL : https://stackoverflow.com/questions/2852276/make-div-overlay-entire-page-not-just-viewport
'developer tip' 카테고리의 다른 글
| Bootstrap 3.0 : 같은 줄에 텍스트와 입력을 사용하는 방법은 무엇입니까? (0) | 2020.09.13 |
|---|---|
| 정적 클래스 내에서 사전 선언 (0) | 2020.09.13 |
| 로거 래퍼 모범 사례 (0) | 2020.09.13 |
| 컴퓨터가 죽은 후 Git 저장소가 손상됨 (0) | 2020.09.13 |
| Visual Studio Community Edition 2015 및 2017에서 누락 된 CodeLens 참조 수 (0) | 2020.09.13 |