<div>를 항상 전체 화면으로 만드는 방법은 무엇입니까?

170

내용이 어떻든간에.

이것을 할 수 있습니까?

html css responsive

— 마스크
소스

2

여기에 많은 훌륭한 답변이 있지만 flexbox에 대한 언급이 보이지 않으므로이 2 센트를 공유 할 것이라고 생각했습니다. 부모 div를 100 % 로하는 것이 한 가지이지만 시간이 걸리면 준비하십시오. div의 일부 콘텐츠를 가운데에 배치하려면 flexbox를 살펴보십시오. css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

이것은 항상 나를 위해 작동합니다 :

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

이것은 아마도이 문제에 대한 가장 간단한 해결책 일 것입니다. 네 가지 CSS 속성 만 설정하면됩니다 (하나는 IE를 행복하게하기위한 것이지만).

— 아담 하트
소스

1

@AdamHarte CSS에서 'html'선택기를 제거하면 왜 작동하지 않습니까? → 몸 {신장 : 100 %; 여백 : 0; }

— Alex Prut

2

@ P.Alex Math! HTML 태그 높이가 내용에 맞게 늘어 나면 본문 높이는 부모의 100 %이며 사용 가능한 공간의 100 %로 강제하지 않습니다.

— Adam Harte

1

난 그냥 cefsharp 크롬을 사용하여 wpf에서 시도하고 작동합니다 :)

— adminSoftDK

106

이것은 순수한 CSS를 사용하여 전체 화면 div를 만드는 내 솔루션입니다. 스크롤 할 때 지속되는 전체 화면 div를 표시합니다. 페이지 내용이 화면에 맞으면 페이지에 스크롤 막대가 표시되지 않습니다.

IE9 +, Firefox 13+, Chrome 21+에서 테스트

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

스 니펫 확장

— 미하이 시쿠
소스

58

이것은 가장 안정적이고 쉬운 방법이며 모든 최신 브라우저에서 작동합니다.

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}

<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

스 니펫 확장

_{Firefox, Chrome, Opera, Vivaldi, IE7 + (IE11의 에뮬레이션 기반)에서 작동하도록 테스트되었습니다.}

— 두려움
소스

1

다음을 사용하면 더 잘 작동합니다. position: fixed; top: 0; left: 0;이제 다른 부분 : width: 100%; height: 100%;. 이것은 실제로 오래된 브라우저에서도 완벽하게 작동합니다.

— Aart den Braber

1

아래쪽과 오른쪽을 사용하는 것보다 너비와 높이를 사용하는 것이 더 좋은 이유는 무엇입니까? 너비와 높이를 사용하고 패딩 및 / 또는 테두리를 원한다면을 가지고 있어야합니다 box-sizing: border-box;. 그렇지 않으면 더 큰 상자가 생겨 스크롤이 발생할 수 있습니다. 참조 이 .

— awe

31

최신 브라우저에서이 작업을 수행하는 가장 좋은 방법은 뷰포트 백분율 길이를 사용하여 해당 단위를 지원하지 않는 브라우저의 일반 백분율 길이로 돌아가는 것 입니다.

뷰포트 백분율 길이는 뷰포트 자체의 길이를 기준으로합니다. 여기서 사용할 두 단위는 vh(뷰포트 높이)와 vw(뷰포트 너비)입니다. 100vh뷰포트 높이의 100 %와 100vw같고 뷰포트 너비의 100 % 와 같습니다.

다음 HTML을 가정합니다.

<body>
    <div></div>
</body>

다음을 사용할 수 있습니다.

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

다음은 결과 프레임의 높이와 너비를 채우는 요소 를 보여주는 JSFiddle 데모 입니다 div. 결과 프레임의 크기를 조정하면 div그에 따라 요소의 크기가 조정됩니다.

— 제임스 도넬리
소스

18

IE Josh가 없습니다. 테스트 해주세요. 감사.

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

— be 베
소스

당신은 100 %로 폭을 설정할 필요가 없습니다

— 아담 하트에게

나는 그것을 얻지 못한다. DIV에서 높이 800px를 하드 코딩하고 있습니다. OP는 이것이 역동적이기를 원합니다.

— Josh Stodola

죄송합니다. 몰래 들어가는 것을 보지 못했습니다 (또는 위 / 왼쪽). 그럼 괜찮습니다 :)

— Adam Harte

참고로, position: fixed페이지를 스크롤 할 수있는 경우 대신 사용할 수도 있지만 일부 모바일 브라우저에서는 작동하지 않습니다. caniuse.com/#feat=css-fixed

— luiges90

1

이 문제를 해결하는 더 현대적인 방법이 있다고 들었습니다. @Tubbe 그것이 사실인지 아십니까?

— bzlm

8

내가 가장 우아한 방법을 발견하면 다음과 같다, 여기에 대부분의 트릭은 만드는 것입니다 div'들 position: fixed.

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

스 니펫 확장

— 제프 티안
소스

8

body요소를 a로 변경 flex container하고 다음 div을 a 로 변경하십시오 flex item.

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

<div></div>

스 니펫 확장

— 모리
소스

8

다음은 가장 짧은 솔루션입니다 vh. 참고 사항 vh에서 지원되지 않는 일부 오래된 브라우저를 .

CSS :

div {
    width: 100%;
    height: 100vh;
}

HTML :

<div>This div is fullscreen :)</div>

— 올리 에델
소스

1

편리하지만 모바일 브라우저에 문제가 있습니다. css-tricks.com/the-trick-to-viewport-units-on-mobile

— Alexander Kim

왜 문제가 복잡합니까? 모바일 브라우저 인 DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 및 Chrome 81.0.4044.138 및 데스크톱에서 작동합니다. 용감한 1.10.97, Chrome 83.0.4103.116 및 Safari 12.1.2.

— 야콥

1

이것이 내가 사용하는 트릭입니다. 반응 형 디자인에 적합합니다. 사용자가 브라우저 크기 조정을 망칠 때 완벽하게 작동합니다.

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>

— 샤둘
소스

-8

불행히도 heightCSS 의 속성은 예상만큼 안정적이지 않습니다. 따라서 해당 요소의 높이 스타일을 사용자 뷰포트의 높이로 설정하려면 Javascript를 사용해야합니다. 그리고 네, 이것은 절대 위치 지정없이 수행 할 수 있습니다 ...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

— 조쉬 스토 돌라
소스

1

jQuery (권장)와 같은 라이브러리를 사용하는 경우 높이를 얻는 것이 $(window).height();가장 좋습니다.

— 조쉬 스토 돌라

순수한 CSS 솔루션이 있습니까?

— Mask

@Mask 아니요, 없습니다. 어쨌든.

— Josh Stodola

@Jed 최소 높이 : 100 %를 적용하고 Mac-Safari에서 사용해보십시오. 여기에서 해결책을 찾을 수 있습니다. 나는 그것이 플랫폼에 대해 논쟁하는 것보다 낫다고 생각합니다.

— Josh Stodola

3

이것은 IE7, Chrome3 및 Safari4 및 Opera10에서 작동합니다. 모두 Windows에서 테스트되었습니다. 단점은 마스크 가 피하고 싶었던 자바 스크립트를 사용한다는 것입니다 (이 답변에 대한 그의 의견 참조). TandemAdam 의 답변은 순수한 CSS이며 Opera를 제외하고 테스트 한 모든 브라우저에서 작동합니다.

— awe