css - working - section height 100



CSS Div 스트레치 100 % 페이지 높이 (8)

내 페이지의 왼쪽에 탐색 모음이 있으며 페이지 높이의 100 %까지 늘리 길 원합니다. 뷰포트의 높이가 아니라 스크롤 할 때까지 숨겨진 영역을 포함합니다. 나는 이것을 달성하기 위해 자바 스크립트를 사용하고 싶지 않다.

HTML / CSS로 할 수 있습니까?


Answer #1

HTML5를 사용하면 가장 쉬운 방법은 height: 100vh . 'vh'는 브라우저 창의 뷰포트 높이를 나타냅니다. 브라우저 및 모바일 장치의 크기 조정에 반응합니다.


Answer #2

간단한, 그냥 테이블 div에 포장 ...

HTML :

<div class="fake-table">
   <div class="left-side">
     some text
   </div>
   <div class="right-side">
     My Navigation or something
   </div>
</div>

CSS :

<style>

 .fake-table{display:table;width:100%;height:100%;}
 .left-size{width:30%;height:100%;}
 .left-size{width:70%;height:100%;}

</style>

Answer #3

나는 비슷한 문제가 있었고 해결책은 이것을하는 것이었다.

#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*/
}

상위 요소 (또는 단순히 '본문')에 position: relative; 해야 할 수도 있습니다 position: relative;


Answer #4

모달 팝업창을 내기 전에 전체 웹 페이지를 덮고 싶습니다. 나는 CSS와 Javascript를 사용하여 여러 가지 방법을 시도했지만 다음 해결책을 찾아 낼 때까지는 아무 것도 도움이되지 않습니다. 그것은 저를 위해 일합니다. 나는 그것이 당신을도 돕기를 바랍니다.

<!DOCTYPE html>
<html>
	<head>
		<style>
			html, body {
			    margin: 0px 0px;
			    height 100%;
			}
          
            div.full-page {
                position: fixed;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity:0.8;
                overflow-y: hidden;
                overflow-x: hidden;
            }
          
            div.full-page div.avoid-content-highlight {
                position: relative;
                width: 100%;
                height: 100%;
            }
          
            div.modal-popup {
                position: fixed;
                top: 20%;
                bottom: 20%;
                left: 30%;
                right: 30%;
                background-color: #FFF;
                border: 1px solid #000;
            }
		</style>
		<script>
		
			// Polling for the sake of my intern tests
			var interval = setInterval(function() {
				if(document.readyState === 'complete') {
					clearInterval(interval);
					isReady();
				}    
			}, 1000);
			
			function isReady() {
				document.getElementById('btn1').disabled = false;
				document.getElementById('btn2').disabled = false;
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
			}
			
			function promptModalPopup() {
                document.getElementById("div1").style.visibility = 'visible';
                document.getElementById("div2").style.visibility = 'visible';
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            }
          
            function closeModalPopup() {
                document.getElementById("div2").style.visibility = 'hidden';  
                document.getElementById("div1").style.visibility = 'hidden';
				
				// enable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'scroll';
            }
		</script>
		
	</head>
	<body id="body">
		<div id="div1" class="full-page">
			<div class="avoid-content-highlight">
                
            </div>
		</div>
        <button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
		<div id="demo">
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
		</div>
        <div id="div2" class="modal-popup">
            I am on top of all other containers
            <button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
        <div>
	</body>
</html>

행운을 빕니다 ;-)


Answer #5

여기에 동적 인 배경을위한 컨테이너로 div를 사용할 때 마침내 떠오른 해결책이 있습니다.

  • 배경이 아닌 용도의 z-index 을 제거하십시오.
  • 전체 높이 열에 대해 left 또는 right 제거하십시오.
  • 전체 너비 행의 top 또는 bottom 을 제거합니다.

편집 1 : 아래의 CSS는 FF 및 Chrome에서 올바르게 표시되지 않았기 때문에 편집되었습니다. 이동 된 position:relative 으로 HTML에 있고 body를 height:100% 설정 height:100% min-height:100% 대신 min-height:100% .

EDIT 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: relative 는 DIV가 그려 질 때 DIV가 HTML 상자 안에 남아 있도록 보장하여 bottom:0 은 HTML 상자의 맨 아래를 나타냅니다. 구름 컨테이너에서 height:100% 를 사용할 수도 있습니다 height:100% 이제는 HTML 태그의 높이를 나타내며 뷰포트가 아닙니다.


Answer #6

절대 위치를 사용하십시오. 이것은 수동으로 배치하거나 부동 대화 상자를 필요로하는 position absolute를 사용하는 데 일반적으로 사용되는 방식이 아닙니다. 창이나 내용의 크기를 조정하면 자동으로 늘어납니다. 표준 모드가 필요하다고 생각하지만 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를 navbar와 동일한 너비만큼 오프셋합니다.

이것은 CSS3 플렉스 박스 모델로 훨씬 쉽게 만들어졌지만 아직 IE에서는 사용할 수 없으며 일부는 자체적 인 단점이 있습니다.



Answer #8

 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }
<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>





stretch