source

만드는 법만드는 법항상 풀스크린?

ittop 2023. 10. 9. 23:33
반응형

만드는 법
항상 풀스크린?

내용이 어떻든 간에.

이것도 가능한가요?

이는 항상 제게 도움이 됩니다.

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

이것이 아마도 이 문제에 대한 가장 간단한 해결책일 것입니다.4개의 CSS 속성만 설정하면 됩니다(단, 그 중 하나는 IE를 행복하게 만드는 것입니다).

이것이 순수한 CSS를 사용하여 전체 화면 디브를 만드는 나의 솔루션입니다.스크롤 시 지속되는 전체 화면 디브를 표시합니다.그리고 페이지 내용이 화면에 맞는 경우, 페이지에 스크롤 바가 표시되지 않습니다.

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

현대식 브라우저에서 이를 수행하는 가장 좋은 방법은 Viewport-percentage Lengths를 사용하는 것이며, 해당 장치를 지원하지 않는 브라우저의 경우 일반적인 백분율 길이로 다시 돌아갑니다.

뷰포트-백분율 길이는 뷰포트 자체의 길이를 기준으로 합니다.우리가 여기서 사용할 두 개의 유닛은.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가 없지만 이것은 효과가 있을 것입니다.

<html>
<head>
    <title>Hellomoto</title>
    <style type="text/css">
        .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>

가장 짧은 해결책은 다음과 같습니다.vh. 참고하시기 바랍니다.vh일부 오래된 브라우저에서는 지원되지 않습니다.

업데이트 : 제가 이 글을 올린 지 4년이 지났습니다.한편, 대부분의 브라우저는 이를 지원해야 합니다.

CSS:

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

HTML:

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

변경합니다.body플렉스 컨테이너에 요소를 넣고div플렉스 항목으로:

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

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

제가 발견한 가장 우아한 방법은 다음과 같습니다. 여기서 가장 좋은 방법은 다음과 같습니다.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

이것이 제가 쓰는 요령입니다.반응성이 좋은 디자인에 적합합니다.사용자가 브라우저 크기 조정을 시도할 때 완벽하게 작동합니다.

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

Fullscreen API 사용 및:fullscreen의사 selector, 모든 요소가 전체 화면 모드를 전환할 수 있습니다.

참고:

  • 스택 오버플로가 전체 화면 모드를 허용하지 않습니다(document.fullscreenEnabled은 ( ), 를 수 .requestFullscreen()여기서의 방법.

질문이 jQuery를 요청하지 않는다는 것을 알고 있습니다.이벤트 바인딩을 단순화하기 위해 라이브러리를 사용하고 있습니다.물론 바닐라 JS를 대신 사용할 수 있습니다.

const ns = {
  img_click: (e) => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
      console.log('exited fullscreen');
    } else {
      console.log('entering fullscreen');
      e.currentTarget.requestFullscreen();
    }
  }
};

$('body').on('click', 'img', ns.img_click);

console.log('Fullscreen allowed:', document.fullscreenEnabled);
.gallery {
  display: flex;
  gap: 1em;
}

img {
  width: 100px;
  aspect-ratio: 1/1;
  border-radius: .5em;
  cursor: zoom-in;
  object-fit: cover;
}

img:fullscreen {
  width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery">
  <img src="https://picsum.photos/id/123/500/250" alt="Random image" />
  <img src="https://picsum.photos/id/234/250/500" alt="Random image" />
  <img src="https://picsum.photos/id/345/500/500" alt="Random image" />
</div>

참조:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/ : 전체 화면

저는 이 간단한 해결책으로 문제를 해결할 수 있었습니다.또한 페이지가 얼마나 오래 스크롤하든 디브는 항상 전체 화면을 유지합니다.

#fullScreenDiv {
  position: fixed;
  top: 0;
  bottom: 0;      
  left: 0; /*If width: 100%, you don't need it*/
  right: 0; /*If width: 100%, you don't need it*/
}

이것이 도움이 되기를 바랍니다.

이봐, 이게 내겐 통했었단 말이오.

#splashScreen{
        background-color:white;
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        overflow:auto;
        max-width: 2000px;

  }

도.heightCSS의 속성은 신뢰성이 부족합니다.따라서 해당 요소의 높이 스타일을 사용자 뷰포트의 높이로 설정하기 위해서는 자바스크립트를 사용해야 할 것입니다.네, 절대적인 위치를 정하지 않고도 할 수 있어요

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

반응형

'source' 카테고리의 다른 글

소셜 로그인(OAuth)을 사용하여 사용자 지정 WP API 끝점 인증  (0) 2023.10.09
AngularJS 및 PHP 백엔드  (0) 2023.10.09
jQuery로 텍스트 색상을 변경하려면 어떻게 해야 합니까?  (0) 2023.10.09
랜덤 DAG 생성  (0) 2023.10.09
ThickBox가 닫혔을 때 이벤트를 어떻게 트리거하시겠습니까?  (0) 2023.10.09

'source'의 다른글

  • 현재글만드는 법만드는 법항상 풀스크린?

관련글

댓글

티스토리툴바