[css] CSS Div 스트레치 100 % 페이지 높이

내 페이지 왼쪽에 탐색 표시 줄이 있고 페이지 높이의 100 %로 늘리기를 원합니다. 뷰포트의 높이뿐만 아니라 스크롤 할 때까지 숨겨진 영역을 포함합니다. 이것을 달성하기 위해 자바 스크립트를 사용하고 싶지 않습니다.

HTML / CSS로 할 수 있습니까?

답변

다음은 동적 배경의 컨테이너로 div를 사용할 때 마침내 생각해 낸 솔루션입니다.

z-index백그라운드가 아닌 용도를 제거하십시오 .
전체 높이 열을 제거 left하거나 제거하십시오 right.
전체 폭 행을 제거 top하거나 제거하십시오 bottom.

편집 1 : 아래의 CSS는 FF 및 Chrome에서 올바르게 표시되지 않아 편집되었습니다. position:relativeHTML 로 이동 하고 본문 height:100%대신을 (를) 설정했습니다 min-height:100%.

편집 2 : CSS에 추가 의견이 추가되었습니다. 위에 몇 가지 지침을 추가했습니다.

CSS :

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

HTML :

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

왜?

html{min-height:100%;position:relative;}

이것이 없으면 클라우드 컨테이너 DIV가 HTML의 레이아웃 컨텍스트에서 제거됩니다. position: relativeDIV가 그려 질 때 DIV가 HTML 상자 bottom:0의 하단 을 참조 하도록 HTML 상자 안에 유지되도록합니다 . height:100%클라우드 컨테이너에서도 뷰포트가 아닌 HTML 태그의 높이를 참조하므로 사용할 수 있습니다 .

답변

HTML5를 사용하는 가장 쉬운 방법은 간단하게하는 것 height: 100vh입니다. 여기서 ‘vh’는 브라우저 창의 뷰포트 높이를 나타냅니다. 브라우저 및 모바일 장치의 크기 조정에 응답합니다.

답변

비슷한 문제가 있었고 해결책은 다음과 같습니다.

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

페이지 높이가 100 % 인 페이지 중심 div를 원했기 때문에 전체 솔루션은 다음과 같습니다.

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

부모 요소 (또는 단순히 ‘body’)를 만들어야 할 수도 있습니다. position: relative;

답변

가짜 열을 사용하여 속일
수도 있고 CSS 속임수를 사용할 수도 있습니다.

답변

테이블을 사용하는 것은 간단합니다.

<html>

<head>
    <title>100% Height test</title>
</head>

<body>
    <table style="float: left; height: 100%; width: 200px; border: 1px solid red">
        <tbody>
            <tr>
                <td>Nav area</td>
            </tr>
        </tbody>
    </table>
    <div style="border: 1px solid green;">Content blabla... text
        <br /> text
        <br /> text
        <br /> text
        <br />
    </div>
</body>

</html>

DIV가 소개되었을 때 사람들은 테이블을 두려워하여 가난한 DIV가 은유 적 망치가되었습니다.

답변

절대 위치를 사용하십시오. 이것은 일반적으로 수동으로 물건을 배치하거나 플로팅 대화 상자가 필요한 위치 절대 값을 사용하는 데 사용되는 방법이 아닙니다. 창 또는 내용의 크기를 조정할 때 자동으로 늘어납니다. 표준 모드가 필요하지만 IE6 이상에서 작동한다고 생각합니다.

div를 ID ‘thecontent’로 바꾸고 콘텐츠로 지정하십시오 (지정된 높이는 설명을 위해 실제 콘텐츠에 높이를 지정할 필요가 없습니다).

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

이것이 작동하는 방식은 외부 div가 탐색 모음의 참조 점으로 작동한다는 것입니다. 외부 div는 ‘content’div의 내용으로 확장됩니다. 탐색 모음은 절대 위치를 사용하여 상위 높이까지 확장됩니다. 가로 정렬의 경우 콘텐츠 div를 동일한 탐색 표시 줄 너비만큼 오프셋합니다.

CSS3 flex box 모델을 사용하면 훨씬 쉽게 만들 수 있지만 IE에서는 아직 사용할 수 없으며 자체 단점이 있습니다.

답변

나는 당신과 같은 문제에 부딪쳤다. DIV자바 스크립트를 통해 div를 조작하기 쉽기 때문에 배경 으로 만들고 싶었습니다 . 어쨌든 그 div의 CSS에서 세 가지 일을했습니다.

CSS :

{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}