브라우저 창의 높이를 100%로 구분하는 방법

programing

브라우저 창의 높이를 100%로 구분하는 방법

easyjava 2023. 4. 14. 22:16

브라우저 창의 높이를 100%로 구분하는 방법

. 왼쪽div의 '우'입니다.div.

★★★★★div을 띠다background-color사용자 브라우저 창의 높이에 따라 수직으로 확장해야 합니다.지금으로서는background-color 내용의 div.

height:100%,min-height:100%; 등등.

CSS 3 측정 유닛은 다음과 같습니다.

Viewport-Percentage(또는 Viewport-Relative) 길이

Viewport-Percentage 길이란 무엇입니까?

위의 링크된 W3 후보 권장 사항:

viewport-percentage 길이는 처음 포함된 블록의 크기에 상대적입니다.초기 포함 블록의 높이 또는 폭이 변경되면 그에 따라 크기가 조정됩니다.

는 「」입니다.vh 높이 (뷰포트 높이),vw 폭 (뷰포트 폭),vmin ('뷰포트 최소길이')vmax(일부러)

어떻게 하면 구분선이 브라우저의 높이를 채우도록 할 수 있을까요?

이 합니다.vh1vh1%로 하다 ①, ②, ,,100vh 내의 되어 있는지에 .

HTML

<div></div>

CSS

div {
    height: 100vh;
}

말 그대로 이것만 있으면 돼.다음은 사용 중인 JSFiddle의 예입니다.

이러한 새로운 유닛을 지원하는 브라우저는 무엇입니까?

이는 현재 Opera Mini를 제외한 모든 최신 주요 브라우저에서 지원됩니다.확인: 사용 가능...를 참조하십시오.

여러 열에서 어떻게 사용할 수 있습니까?

왼쪽과 오른쪽 칸막이가 특징인 당면 질문의 경우, 여기 JSFiddle 예가 있습니다. 두 칸으로 구성된 레이아웃을 모두 포함합니다.vh ★★★★★★★★★★★★★★★★★」vw.

요?`100vh`는 `100%`

다음 레이아웃을 예로 들어 보겠습니다.

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

p는 100% 높이로 되어 있지만 에는 "%"가 포함되어 있기 div200픽셀의 높이를 가지며, 200픽셀의 100%가 200픽셀이 됩니다.body. ㅇㅇㅇ를 사용해서.100vh에, 「」, 「」는, 「」가 것을 의미합니다.p의 높이는 body에에를 div높이.JSFiddle에 부속되어 있는 것을 보면, 그 차이를 쉽게 알 수 있습니다!

의 <div>할 수 .<body> ★★★★★★★★★★★★★★★★★」<html>의 높이를 100%로할 수 있습니다. :) 100%로 설정할 수 있습니다. : )

다음은 예를 제시하겠습니다.

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

요소를 확실히 위치시킬 수 있다면

position: absolute;
top: 0;
bottom: 0;

할 수 있을 거예요.

뷰 포트 유닛은 CSS에서 사용할 수 있습니다.

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}

하시면 됩니다.vh뷰포트 높이의 1%에 비례하는 이 경우...

즉, 높이를 커버하고 싶다면 단순히100vh.

아래 그림을 보세요.

제가 작성한 스니펫을 다음과 같이 사용해 보십시오.

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}

<div class="left"></div>
<div class="right"></div>

모든 에는, 「」( 「」)이 붙어 있는 톱 투표가 도 포함됩니다.vh플렉스 모델 솔루션과 비교했을 때 최적이라고 할 수 없습니다.

CSS 플렉스 모델의 등장으로 100% 높이의 문제를 해결하는 것은 매우 쉬워졌습니다.사용:height: 100%; display: flex에 대해서, 「」를 참조해 주세요.flex: 1자성 요소에서.컨테이너의 빈 공간을 자동으로 모두 차지합니다.

마크업과 CSS의 심플함에 주의해 주세요.테이블 해크 같은 건 없어

플렉스 모델은 IE11+뿐만 아니라 모든 주요 브라우저에서 지원됩니다.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

플렉스 모델에 대한 자세한 내용은 여기를 참조하십시오.

다음과 같은 몇 가지 중요한 세부 사항은 언급하지 않았습니다.

레이아웃은 너비가 고정되어 있습니까?
두 열 중 하나 또는 둘 다 너비가 고정되어 있습니까?

한 가지 가능성이 있습니다.

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; /* Width optional */
}

#left {
  background: yellow;
  float: left;
  width: 360px; /* Width optional, but recommended */
}

#right {
  background: grey;
  margin-left: 360px; /* Must agree with previous width */
}

<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

고정해야 할 기둥과 액체에 따라 많은 변화가 있습니다.이 작업은 절대적인 위치 설정에서도 수행할 수 있지만 일반적으로 플로트를 사용하는 것이 더 나은 결과(특히 크로스 브라우저의 경우)를 발견했습니다.

이것이 나에게 효과가 있었다.

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

position:fixedposition:absolute이렇게 하면 아래로 스크롤을 해도 분할이 화면 끝까지 확장됩니다.

여기 높이에 대한 고정 장치가 있습니다.

CSS 사용 시:

#your-object: height: 100vh;

하지 않는 vh-units modernizr을 사용합니다.

를 추가합니다(「」의 합니다).vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
        var height = parseInt(window.innerHeight/2, 10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"], 10);

        bool = !!(compStyle == height);
    });
    return bool;
});

으로 이 를 사용하여 뷰포트의 를 뷰포트에 합니다.#your-object가 「」를 서포트하고 않은 .vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height()) + 'px'});
    }
});

여기에 있는 모든 답변들에도 불구하고, 나는 아무도 문제를 제대로 해결하지 못했다는 것을 알고 놀랐다.★★★★★★★★★★★★★★★★를 사용했을 경우.100vh height/min-height내용이 페이지보다 길면 레이아웃이 깨졌습니다.내가 대신 사용한다면100% height/min-height컨텐츠가 페이지 높이보다 작을 때 레이아웃이 깨졌습니다.

두 가지 사례를 모두 해결한 솔루션은 상위 두 가지 답을 조합하는 것이었습니다.

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

100vw = 뷰포트 폭의 100%.

100vh = 뷰포트 높이의 100%.

「」를는,div사용하는 브라우저 크기에서 폭 또는 높이를 100%로 설정합니다.

::100vw

이::100vh

를 작게 는, 「」「」「」, 「CSS」를 합니다.calc§:

#example {
    width: calc(100vw - 32px)
}

테스트 완료:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

이후의 에서는, 「」를 사용할 수 .vh:

#right, #left {
  height: 100vh
}

100%폭과 높이에 따라 다르게 작동합니다.

「」를 했을 경우width: 100%100로 하다

「」를 했을 경우height: 100%100로 하다, 모든 , 최, 최, 최, 최, 최, 최, 최, 최, 최, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this, this,0맨위를 '어느 로가 있습니다.그래서 맨 위 요소를 설정할 필요가 있습니다.min-height창 높이입니다.

저는 항상 본체를 최소 높이 100vh로 지정하고 위치 결정과 계산을 쉽게 합니다.

body {
  min-height: 100vh;
}

풀 페이지는 '뷰포트'라고 불리며 CSS 3에서는 뷰포트에 따라 요소를 설계할 수 있습니다.

이러한 단위는 뷰포트 백분율 길이라고 불리며 처음 포함된 블록의 크기에 상대적입니다.

는 Viewport-Height라고 .vh. 는 100vh입니다 100vh
는 Viewport-Width로 .vw. 높이는 100볼트
vmin(뷰포트 최소 길이)과 vmax(뷰포트 최대 길이)도 있습니다.

따라서 CSS에 다음 사항을 추가하면 문제를 쉽게 해결할 수 있습니다.

.classname-for-right-div /* You could also use an ID */ {
  height: 100vh;
}

다음은 Viewport 상대 길이에 대한 정보입니다.

min-height: 100%높이를 지정하지 마십시오(또는 자동으로 설정).★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

가장 간단한 방법은 이렇게 하는 것이다.

div {
    background: red;
    height: 100vh;
}

body {
    margin: 0px;
}

<div></div>

html과 body_height를 100%로 설정하면 페이지 전체가 커버됩니다.

특정 div 최소 높이를 100%로 설정하면 창 전체가 다음과 같이 표시됩니다.

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

기억하세요.

이것은 div의 직계 부모가 body인 경우에만 동작합니다.직계 부모로부터 항상 상속되는 퍼센티지와 위의 CSS 코드를 실행함으로써 div에 직계 부모로부터 높이를 100% 상속하고 최소 높이: 100%로 하도록 지시합니다.

다른 방법

div 높이를 100vh로 설정하기만 하면 됩니다.뷰포트 높이 100을 의미합니다.

CSS

div#some-div {
  height: 100vh
}

에는 몇 이 있습니다.<div>100% 삭제

방법(A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

vh를 사용하는 방법(B):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

<div class="div-left"></div>
<div class="div-right"></div>

(c) 플렉스 박스를 사용하는 방법:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

「」를 .height:100%html&body

html, 
body {
    height: 100%;
}

요소 "2div"를 설정할 "2div"를 설정합니다.display:flex★★★★★★★★★★★★★★★★★★.

이 방법은 효과가 있었습니다.

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

이 페이지에서 가져옵니다.

다음은 이전 답변과 완전히 다른 내용이지만 일부에서는 도움이 될 수 있습니다.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

블록 요소는 기본적으로 상위 요소의 전체 폭을 사용합니다.

이렇게 하면 설계 요건인 수직 스택을 충족할 수 있습니다.

9.4.1 블록 포맷 컨텍스트

블록 포맷 컨텍스트에서는, 격납 블록의 상부를 시작으로, 박스가 상하로 차례차례 배치된다.

그러나 이 동작은 높이까지 확장되지 않습니다.

의 요소는 height: auto를 참조해 주세요.

너비와 달리 추가 공간을 원하는 경우 높이를 지정해야 합니다.

따라서 다음 두 가지 사항에 유의하십시오.

전체 너비를 원하지 않는 경우 블록 요소의 너비를 정의해야 합니다.
컨텐츠 높이를 원하지 않는 한 요소의 높이를 정의해야 합니다.

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

옵션 중 하나는 CSS 테이블을 사용하는 것입니다.브라우저 지원 기능이 뛰어나고 Internet Explorer 8에서도 작동합니다.

JSFiddle의 예

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

한 번 해봐...

* {
  padding: 0;
  margin: 0;
}

.parent_div {
  overflow: hidden;
  clear: both;
  color: #FFF;
  text-align: center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;
}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

뷰 포트 높이를 의미하는 "px" 대신 "vh" 단위를 사용하십시오.

height: 100vh;

FlexBox CSS 사용

Flexbox는 이러한 유형의 문제에 매우 적합합니다.대부분의 경우 콘텐츠를 수평 방향으로 배치하는 것으로 알려져 있지만 Flexbox는 수직 배치 문제에 대해서도 잘 작동합니다.수직 섹션을 플렉시블 컨테이너로 감싸고 확장할 섹션을 선택하기만 하면 됩니다.컨테이너의 빈 공간을 자동으로 모두 차지합니다.

하시면 됩니다.display: flex ★★★★★★★★★★★★★★★★★」height: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

두 가지 작업을 해야 합니다. 하나는 높이를 기존과 같이 100%로 설정하는 것입니다.두 번째는 위치를 절대값으로 설정합니다.그것이 효과가 있어야 해요.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

원천

이제 높이: 100vh를 사용합니다. 고정된 창 높이:

<style>
    .header-top {
        height: 100vh;
        background: #000;
        color: #FFF;
        display: flex;
        align-items: center;
        padding: 10px;
        justify-content: space-around;
    }

    .header-top ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
    }

    .header-top ul li {
        padding:0px 10px;
    }
</style>

<div class="header-top">
    <div class="logo">Hello</div>
    <ul>
        <li>Menu</li>
        <li>About Us</li>
        <li>Contact US</li>
        <li>Login</li>
    </ul>
</div>

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vh; /* Height window (vh) */
}
.wrapper .left{
  width: 80%; /* Width optional, but recommended */
}
.wrapper .right{
  width: 20%; /* Width optional, but recommended */
  background-color: #DD1F26;
}

<!--
vw: hundredths of the viewport width.
vh: hundredths of the viewport height.
vmin: hundredths of whichever is smaller, the viewport width or height.
vmax: hundredths of whichever is larger, the viewport width or height.
-->
<div class="wrapper">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

언급URL : https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window

'programing' 카테고리의 다른 글

env: bash\r: 해당 파일 또는 디렉토리가 없습니다. (0)	2023.04.14
Bash 셸 스크립트에 문자열이 정의되어 있지 않은지 확인하는 방법 (0)	2023.04.14
Git에서 로컬 브랜치를 리모트 브랜치로 대체하려면 어떻게 해야 하나요? (0)	2023.04.14
Windows 서비스가 프로그램 방식으로 재시작하려면 어떻게 해야 합니까? (0)	2023.04.14
명령줄에서 .bash_profile을 새로고침하는 방법 (0)	2023.04.14

현재글브라우저 창의 높이를 100%로 구분하는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

bash, mariaDB, TypeScript, GIT, sql-server, oracle, jQuery, MongoDB, MySQL, angular, AngularJS, Ajax, reactjs, WordPress, JSON, C, WPF, Python, spring-boot, Excel,

Today :
Yesterday :

easyjava

브라우저 창의 높이를 100%로 구분하는 방법

브라우저 창의 높이를 100%로 구분하는 방법

Viewport-Percentage(또는 Viewport-Relative) 길이

Viewport-Percentage 길이란 무엇입니까?

어떻게 하면 구분선이 브라우저의 높이를 채우도록 할 수 있을까요?

HTML

CSS

이러한 새로운 유닛을 지원하는 브라우저는 무엇입니까?

여러 열에서 어떻게 사용할 수 있습니까?

요?`100vh`는 `100%`

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2026/04 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

브라우저 창의 높이를 100%로 구분하는 방법

브라우저 창의 높이를 100%로 구분하는 방법

Viewport-Percentage(또는 Viewport-Relative) 길이

Viewport-Percentage 길이란 무엇입니까?

어떻게 하면 구분선이 브라우저의 높이를 채우도록 할 수 있을까요?

HTML

CSS

이러한 새로운 유닛을 지원하는 브라우저는 무엇입니까?

여러 열에서 어떻게 사용할 수 있습니까?

요?100vh는 100%

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

요?`100vh`는 `100%`