development

만드는 방법

big-blog 2020. 6. 9. 07:47
반응형

만드는 방법
항상 전체 화면?

내용이 어떻든간에.

이것을 할 수 있습니까?

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

<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를 행복하게하기위한 것이지만).

이것은 순수한 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>

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

.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의 에뮬레이션 기반)에서 작동하도록 테스트되었습니다.

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

뷰포트 백분율 길이는 뷰포트 자체의 길이를 기준으로합니다. 여기서 사용할 두 단위는 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그에 따라 요소의 크기가 조정됩니다.

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>

내가 가장 우아한 방법을 발견하면 다음과 같다, 여기에 대부분의 트릭은 만드는 것입니다 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>

The mask demo

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

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

div {
  flex: 1;
  background: tan;
}
<div></div>

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

CSS :

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

HTML :

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

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

<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>

Unfortunately, the height property in CSS is not as reliable as it should be. Therefore, Javascript will have to be used to set the height style of the element in question to the height of the users viewport. And yes, this can be done without absolute positioning...

<!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>

참고URL : https://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen

반응형

'development' 카테고리의 다른 글

C #에서 목록을 어떻게 연결합니까?  (0) 2020.06.10
Django에서 빈 쿼리 세트 확인  (0) 2020.06.10
부트 스트랩 버튼 드롭 다운 제목에 선택한 항목을 표시하는 방법  (0) 2020.06.09
Windows Workflow Foundation을 언제 사용해야합니까?  (0) 2020.06.09
동적으로 가져온 모듈의 클래스 문자열 이름에서 동적 인스턴스화?  (0) 2020.06.09

'development'의 다른글

  • 현재글만드는 방법

관련글

댓글

티스토리툴바