Div 오버레이를 전체 페이지 (뷰포트뿐만 아니라)로 만드시겠습니까?

95

그래서 제 생각에 꽤 흔한 문제가 있지만 아직 좋은 해결책을 찾지 못했습니다. 오버레이 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를 사용하는 편이 낫습니다.

html css

— 폴라리스 878
소스

또한 여기에서 더 읽을 수 있습니다 : stackoverflow.com/questions/1938536/…

— Marco Demaio

jQuery를 사용하여 실제로 수행 할 수 있습니까?

— 윌리엄 Entriken

225

뷰포트가 중요하지만 스크롤하는 동안에도 전체 웹 사이트가 어둡게 유지되기를 원할 것입니다. 이를 위해 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>

— 샘슨
소스

3

내가 틀릴 수도 있지만 IE6에서 고정 작업을 배치합니까?! 나는 아마도 아무도 더 이상 IE6에 관심이 없다는 것을 알고 있습니다.

— Marco Demaio

29

@Marco 잘 모르겠습니다. 솔직히 말해서 10 년 된 브라우저에 대한 지원이 명시 적으로 요청되지 않았다면 더 이상 신경 쓰지 않을 것입니다. :)

— Sampson

5

그래서 여러분은 모바일 장치에서 어떻게하나요? bradfrostweb.com/blog/mobile/fixed-position

— BorisOkunskiy

3

+1 감사합니다! 오버레이 위에 팝업 창을 추가하여 예제를 확장했습니다. jsbin.com/okabo3/740

— kol

이 문제는 (많은 플러그인에서 사용되는) <select>iOS 에서 요소 를 클릭 하면 전체 뷰포트를 이동하고 기본적으로 모든 것을 깨뜨린다는 것입니다. 고정 된 요소 이동, 스크롤하지 않는 것 등

— billynoah

16

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

— 네이트 바
소스

2

가능한 최고의 솔루션입니다. body에 대해 "overlayed"클래스를 토글하고 위의 스타일을 해당 className이있는 본문에 적용하기 만하면됩니다.

— Sviatoslav Zalishchuk

3

이 답변을 더 설명해주세요. 나는 Sviatoslav의 의견을 이해하지 못합니다.

— Lonnie Best

1

우선 뷰포트가 무엇인지 오해했다고 생각합니다. 뷰포트는 브라우저가 웹 페이지를 렌더링하는 데 사용하는 영역이며, 어떤 식 으로든이 영역을 재정의하도록 웹 사이트를 구축 할 수 없습니다.

둘째, overlay-div가 전체 뷰포트를 덮지 않는 이유는 BODY 및 HTML의 모든 여백을 제거해야하기 때문인 것 같습니다.

스타일 시트 상단에 추가해보세요. 모든 요소의 여백과 패딩이 재설정됩니다. 추가 개발을 더 쉽게 만듭니다.

* { margin: 0; padding: 0; }

편집 : 방금 귀하의 질문을 더 잘 이해했습니다. Position: fixed; Jonathan Sampson이 쓴 것처럼 아마 당신을 위해 잘 될 것입니다.

— Arve Systad
소스

1

모든 것에서 패딩과 여백을 제거해서는 안됩니다 . 버튼 및 양식 입력과 같은 많은 요소를 다시 가져 오는 것은 정말 힘들 수 있습니다.

— Sampson

1

제 생각에는 브라우저에서 모든 것을 동일하게 취급하는 정말 쉬운 방법입니다. IE5에 적응할 때 이전에했던 것처럼 오늘날에는 많이 적용되지 않을 수도 있지만, 스타일 시트에 처음으로 작성하는 작업 중 하나로 여전히 수행합니다.

— Arve Systad

3

@Arve 당신을 닫을 수는 있지만 시간 테스트를 거친 재설정 시트를 대신 사용하는 것이 좋습니다. 자세한 내용은 meyerweb.com/eric/tools/css/reset 을 확인하세요. 마음 에 드실 겁니다. :)

— Sampson

나는 그것을 보았고, 나는 그것이 너무 크다고 생각한다. :)

— Arve Systad

1

@Arve 재설정은 그다지 크지 않습니다. 완전히 복구 *{}하면 더 많은 것을 볼 수 있습니다. :)

— Sampson

0

오버레이 내부의 정보를 텍스트 위로 스크롤 할 수 있기를 원했기 때문에 오버레이를 제자리에 고정하고 싶지 않았기 때문에 상당한 문제가있었습니다. 나는 사용했다 :

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

물론 중간에있는 div에는 약간의 콘텐츠와 투명한 회색 배경이 필요하지만 요점은 확실합니다!

— 벤자민 본
소스

-6

위의 Nate Barr의 답변을 보았습니다. 단순한 것과 크게 다르지 않은 것 같습니다.

html {background-color: grey}

— 저스틴 먼스
소스