높이와 너비에서 항상 창의 크기를 차지하는 Div

로드리 팔라딘

브라우저 창 크기에 관계없이 전체 화면 (전체 너비 및 전체 높이)에 div를 표시하기 위해 페이지에 들어 가려고합니다. 즉, 해당 div는 ALL을 차지하고 스크롤하지 않을 때까지 아래에있는 내용을 볼 수 없습니다.

높이거나 작게 만들더라도 아래로 스크롤하지 않으면 아래의 다음 div가 보이지 않기 때문에 높은 곳에서 작동하는 것 같습니다.

그러나 너비는 또 다른 문제이며 전체를 덮지 않으며 내비게이터 창의 너비를 줄이면 텍스트가 해당 너비로 성형되지 않고 가로 스크롤이 나타납니다.

www.DeepL.com/Translator번역됨 (무료 버전)

HTML 코드

<div id="slider-total">
        <h1>Prueba de titulo</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nesciunt et explicabo impedit ducimus facere quam ipsum vero, accusamus molestias! Dolore perferendis pariatur esse at eaque qui aspernatur consectetur laboriosam.</p>
    </div>
    <div id="siguiente">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste blanditiis sint labore, veritatis quidem sed nemo iure velit tenetur aspernatur facere quasi ullam assumenda, recusandae cupiditate laborum dolore excepturi eveniet?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quis iure sunt temporibus nostrum voluptatum doloremque, explicabo deleniti voluptatibus a enim nobis, tenetur perspiciatis repellendus error unde libero vero voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo asperiores ullam ratione iusto error minima temporibus dolores facere, aliquam alias dicta eveniet, debitis quo deserunt soluta, voluptatum optio suscipit expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus enim esse porro mollitia, facilis dolor voluptate iste, facere maxime minus id suscipit. Quaerat dolorum suscipit quo maiores quas temporibus tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat ullam amet ipsa libero quibusdam inventore fugit dolorum nostrum, animi velit reprehenderit neque, doloribus repudiandae enim vitae ducimus qui harum? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque dolorem sapiente a, ea fuga voluptate mollitia inventore, impedit nihil optio aut itaque consectetur! Corrupti reiciendis quis, odit ducimus quod obcaecati!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste blanditiis sint labore, veritatis quidem sed nemo iure velit tenetur aspernatur facere quasi ullam assumenda, recusandae cupiditate laborum dolore excepturi eveniet?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quis iure sunt temporibus nostrum voluptatum doloremque, explicabo deleniti voluptatibus a enim nobis, tenetur perspiciatis repellendus error unde libero vero voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo asperiores ullam ratione iusto error minima temporibus dolores facere, aliquam alias dicta eveniet, debitis quo deserunt soluta, voluptatum optio suscipit expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus enim esse porro mollitia, facilis dolor voluptate iste, facere maxime minus id suscipit. Quaerat dolorum suscipit quo maiores quas temporibus tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat ullam amet ipsa libero quibusdam inventore fugit dolorum nostrum, animi velit reprehenderit neque, doloribus repudiandae enim vitae ducimus qui harum? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque dolorem sapiente a, ea fuga voluptate mollitia inventore, impedit nihil optio aut itaque consectetur! Corrupti reiciendis quis, odit ducimus quod obcaecati!</p>
    </div>

CSS 코드 :

* {
    box-sizing: border-box;
}

#slider-total {
    width: 100vh;
    height: 100vh;
    background-color: #444;
    color: white;

    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
}

내가 무엇을 잘못하고 있지? 감사

Harith

너비는 100vh뷰포트 높이 의 100 백분위 수입니다 . 따라서 <div>높이보다 넓은 뷰포트가있는 경우 의 너비 가 필요한 것보다 작아 지는 것이 합리적 입니다. 100vw뷰포트 너비 의 100 백분위 수 또는 그 이상이어야합니다 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

div가 브라우저 창의 너비와 높이를 상속하도록하는 방법

분류에서Dev

입력 상자 너비와 높이를 외부 div의 너비와 높이에 대해 100 %로 만들기

분류에서Dev

부트 스트랩에서 창의 높이와 너비를 얻는 방법

분류에서Dev

WPF에서 창 너비와 높이에 따라 컨트롤 너비와 높이를 조정하는 방법

분류에서Dev

캔버스 차트 js의 크기를 창 높이 및 너비와 동일하게 방지

분류에서Dev

js로 svg div에서 너비와 높이를 얻는 방법

분류에서Dev

plist에서 이미지를로드하는 것은 항상 높이와 너비가 0과 같습니다.

분류에서Dev

wpf 창의 높이와 너비를 수정하는 방법

분류에서Dev

Angular에서 KendoGrid의 크기를 조정하는 방법 (높이와 너비 모두)? (열 크기 조정 아님)

분류에서Dev

너비에 비례하여 div 높이의 크기를 조정하는 스크립트가 필요합니다.

분류에서Dev

자식 또는 창 높이의 100 % 뒤에 div 크기 조정

분류에서Dev

높이가 지속적으로 증가 및 감소하는 div의 높이와 항상 일치하도록 div를 얻으려고합니다.

분류에서Dev

PowerPoint에서 LoadImage ()의 너비와 높이를 지정하는 방법

분류에서Dev

div가 브라우저 창의 너비와 높이를 채우고 이미지가 늘어나지 않게하는 방법

분류에서Dev

Windows API에서 Chrome 애플리케이션 창의 높이와 너비를 얻으려고하십니까?

분류에서Dev

img 크기를 찾고 div css 높이와 너비로 설정하는 jquery

분류에서Dev

img 크기를 찾고 div css 높이와 너비로 설정하는 jquery

분류에서Dev

창 크기를 조정하기 전에 너비와 높이를 확인하는 방법은 무엇입니까?

분류에서Dev

창 크기를 화면 너비와 높이의 1/4로 조정하는 방법

분류에서Dev

div 높이와 너비를 이미지에 전달

분류에서Dev

카드의 너비와 높이 또는 색상을 사용하여 여러 개체가있는 이미지에서 카드 감지 및 자르기

분류에서Dev

내 캔버스 (fabricjs)를 항상 창의 전체 너비로 설정하고 창 크기를 조정하고 개체를 제자리에 유지하는 방법

분류에서Dev

SwiftUI에서보기 또는 화면의 높이와 너비를 얻는 방법

분류에서Dev

Java 스윙 이미지의 높이와 너비는 항상 -1입니다.

분류에서Dev

컨테이너 div에서 전체 높이를 차지하는 nanoScroller 만들기

분류에서Dev

JQM을 사용하여 자식 div가 부모의 너비와 높이를 재정의하지 않는 이유

분류에서Dev

창 크기 조정시 동일한 높이의 자식에 대해 div를 다시로드하는 방법

분류에서Dev

창을 열 때 매개 변수를 사용하지 않고 R에서 플롯의 너비와 높이를 지정하는 방법

분류에서Dev

Shiny 및 Shinydashboard에서 verbatimTextOutput의 너비와 높이를 변경하는 방법

Related 관련 기사

  1. 1

    div가 브라우저 창의 너비와 높이를 상속하도록하는 방법

  2. 2

    입력 상자 너비와 높이를 외부 div의 너비와 높이에 대해 100 %로 만들기

  3. 3

    부트 스트랩에서 창의 높이와 너비를 얻는 방법

  4. 4

    WPF에서 창 너비와 높이에 따라 컨트롤 너비와 높이를 조정하는 방법

  5. 5

    캔버스 차트 js의 크기를 창 높이 및 너비와 동일하게 방지

  6. 6

    js로 svg div에서 너비와 높이를 얻는 방법

  7. 7

    plist에서 이미지를로드하는 것은 항상 높이와 너비가 0과 같습니다.

  8. 8

    wpf 창의 높이와 너비를 수정하는 방법

  9. 9

    Angular에서 KendoGrid의 크기를 조정하는 방법 (높이와 너비 모두)? (열 크기 조정 아님)

  10. 10

    너비에 비례하여 div 높이의 크기를 조정하는 스크립트가 필요합니다.

  11. 11

    자식 또는 창 높이의 100 % 뒤에 div 크기 조정

  12. 12

    높이가 지속적으로 증가 및 감소하는 div의 높이와 항상 일치하도록 div를 얻으려고합니다.

  13. 13

    PowerPoint에서 LoadImage ()의 너비와 높이를 지정하는 방법

  14. 14

    div가 브라우저 창의 너비와 높이를 채우고 이미지가 늘어나지 않게하는 방법

  15. 15

    Windows API에서 Chrome 애플리케이션 창의 높이와 너비를 얻으려고하십니까?

  16. 16

    img 크기를 찾고 div css 높이와 너비로 설정하는 jquery

  17. 17

    img 크기를 찾고 div css 높이와 너비로 설정하는 jquery

  18. 18

    창 크기를 조정하기 전에 너비와 높이를 확인하는 방법은 무엇입니까?

  19. 19

    창 크기를 화면 너비와 높이의 1/4로 조정하는 방법

  20. 20

    div 높이와 너비를 이미지에 전달

  21. 21

    카드의 너비와 높이 또는 색상을 사용하여 여러 개체가있는 이미지에서 카드 감지 및 자르기

  22. 22

    내 캔버스 (fabricjs)를 항상 창의 전체 너비로 설정하고 창 크기를 조정하고 개체를 제자리에 유지하는 방법

  23. 23

    SwiftUI에서보기 또는 화면의 높이와 너비를 얻는 방법

  24. 24

    Java 스윙 이미지의 높이와 너비는 항상 -1입니다.

  25. 25

    컨테이너 div에서 전체 높이를 차지하는 nanoScroller 만들기

  26. 26

    JQM을 사용하여 자식 div가 부모의 너비와 높이를 재정의하지 않는 이유

  27. 27

    창 크기 조정시 동일한 높이의 자식에 대해 div를 다시로드하는 방법

  28. 28

    창을 열 때 매개 변수를 사용하지 않고 R에서 플롯의 너비와 높이를 지정하는 방법

  29. 29

    Shiny 및 Shinydashboard에서 verbatimTextOutput의 너비와 높이를 변경하는 방법

뜨겁다태그

보관