CSS Div ยืดความสูงของหน้าได้ 100%

196

ฉันมีแถบนำทางที่ด้านซ้ายของหน้าของฉันและฉันต้องการให้มันยืดได้ถึง 100% ของความสูงของหน้า ไม่ใช่แค่ความสูงของวิวพอร์ต แต่รวมถึงพื้นที่ที่ซ่อนไว้จนกว่าคุณจะเลื่อน ฉันไม่ต้องการใช้จาวาสคริปต์เพื่อทำสิ่งนี้ให้สำเร็จ

มันสามารถทำได้ใน HTML / CSS?

— ทอม
แหล่งที่มา

171

นี่คือวิธีแก้ปัญหาที่ฉันใช้ในที่สุดเมื่อใช้ div เป็นที่เก็บสำหรับพื้นหลังแบบไดนามิก

ลบ z-indexใช้ที่ไม่ใช่พื้นหลัง
ลบleftหรือrightสำหรับคอลัมน์เต็มความสูง
เอาออกtopหรือbottomสำหรับแถวเต็มความกว้าง

แก้ไข 1: CSS ด้านล่างนี้ได้รับการแก้ไขเพราะมันไม่แสดงอย่างถูกต้องใน FF และ Chrome ย้ายposition:relativeที่จะอยู่ใน HTML และตั้งร่างกายเพื่อแทน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: relativeตรวจสอบให้แน่ใจว่า DIV ยังคงอยู่ภายในกล่อง HTML เมื่อถูกวาดเพื่อbottom:0อ้างอิงถึงด้านล่างของกล่อง HTML คุณยังสามารถใช้height:100%บน cloud-container เนื่องจากตอนนี้อ้างถึงความสูงของแท็ก HTML ไม่ใช่วิวพอร์ต

— Knyri
แหล่งที่มา

นี่เป็นสิ่งที่ดี แต่จะไม่เป็นศูนย์กลาง การแก้ไขใด ๆ ที่? กำไรขั้นต้น: 0 อัตโนมัติ ไม่ทำงาน

— ครีม

คำตอบที่ยอดเยี่ยม ฉันสังเกตเห็นว่าคุณต้องใช้ความสูงขั้นต่ำ (และไม่ใช่ความสูง) ในhtmlองค์ประกอบ ทำไมถึงเป็นอย่างนั้น?

— HartleySan

การใช้heightกำลังพูดว่า 'คุณสูงขนาดนี้ แค่.' ซึ่งหมายความว่ามันจะเป็นความสูงของวิวพอร์ต เราต้องการให้สูงอย่างน้อยวิวพอร์ตหรือสูงกว่า min-heightทำอย่างนี้

— Knyri

1

ดัชนี z อยู่ที่นั่นเพราะนี่เป็นข้อมูลโค้ดสำหรับพื้นหลังที่เคลื่อนไหวที่ฉันทำและฉันต้องการให้แน่ใจว่า div อยู่ในพื้นหลัง มันไม่จำเป็นสำหรับองค์ประกอบปกติ

— Knyri

5

มันยอดเยี่ยมมาก ฉันใช้ CSS มา 15 ปีแล้วและไม่เคยคลิกเลยว่าการวางตำแหน่งไปที่<html>และการกำหนดตำแหน่งไปที่วิวพอร์ตเป็นสองสิ่งที่แยกจากกัน ขอบคุณ!

— เบ็นฮัลล์

82

ด้วย HTML5 height: 100vhวิธีที่ง่ายที่สุดก็คือการทำ ตำแหน่ง 'vh' หมายถึงความสูงวิวพอร์ตของหน้าต่างเบราว์เซอร์ ตอบสนองต่อการปรับขนาดเบราว์เซอร์และอุปกรณ์มือถือ

— alchuang
แหล่งที่มา

40

พลาดจุดไปอย่างสมบูรณ์ OP ขอความสูงของหน้าไม่ใช่ความสูงของหน้าต่าง / วิวพอร์ต

— เกร็ก

9

ความสูงเอกสารไม่ใช่ความสูงวิวพอร์ต

— punkbit

7

แสดงความคิดเห็นแบบเดียวกันกับข้างบน

— ericn

11

ฉันรีบอ่านคำถามผิดและพบว่าคำตอบนี้มีประโยชน์ ขอบคุณที่ทำผิดแบบเดียวกันกับที่ฉันทำ แต่ตอนนี้ฉันอยากจะแนะนำคำตอบนี้ให้แก้ไขเพื่อรวมข้อแม้นั้น

— durette

vwโดยวิธีการที่ผมมองมันขึ้นนอกจากนี้ยังมี

— Aaron Franke

14

ฉันมีปัญหาที่คล้ายกันและวิธีแก้ไขคือ:

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

ฉันต้องการ div ที่อยู่กึ่งกลางหน้าด้วยความสูง 100% ของความสูงของหน้าดังนั้นโซลูชันโดยรวมของฉันคือ:

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

— เนทบาร์เร
แหล่งที่มา

17

ทำไมทุกคนเรียกมันว่าcloud-container?

— วิลฟ์

นี่เป็นสิ่งที่ดี! การเพิกเฉยต่อการแก้ไขความสูงนั้นเป็นความคิดที่ยอดเยี่ยมจริง ๆ แล้วและฉันก็ไม่ได้สังเกตเห็นข้อผิดพลาดใด ๆ รักมัน จูบ ! ขอบคุณสำหรับเคล็ดลับ!

— daneczech

13

คุณสามารถโกงโดยใช้Faux Columns หรือคุณสามารถใช้CSS trickery

— Ryan Doherty
แหล่งที่มา

1

โปรดทราบว่า css trickery จะทำให้คุณมีคอลัมน์ความสูงเท่ากับ แต่ไม่ใช่คอลัมน์ที่มีความสูง 100%

— thedz

หากแถบนำทางขยายไปที่ความสูงของเนื้อหาซึ่งกำหนดความสูงของหน้ามันจะให้ความสูง 100%

— Ryan Doherty

1

-1 สำหรับการไม่ให้วิธีที่ปลอดภัย 100% เพื่อให้แน่ใจว่าแถบนำทางสูงพอเสมอ

— Aaron Digulla

ลิงค์เสียชีวิต: ((((

— JBis

9

มันง่ายโดยใช้ตาราง:

<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 ที่น่าสงสารกลายเป็นค้อนเปรียบเทียบ

— Aaron Digulla
แหล่งที่มา

6

ในขณะที่ DIV และรูปแบบของไหลนั้นยอดเยี่ยมฉันคิดว่า CSS ยังคงไม่สามารถจับสาระสำคัญของการจัดวางหน้าจอในลักษณะเดียวกับที่ Table บรรลุสาระสำคัญของเค้าโครงตาราง ... และเค้าโครงตารางยังเป็นวิธีที่ยอมรับได้ในการทำสิ่งต่างๆ

— Jeff Meatball Yang

9

ตารางมีไว้สำหรับข้อมูลแบบตารางไม่ใช่เค้าโครงหน้ากระดาษ ที่ถูกกล่าวว่า CSS มีข้อบกพร่องที่สำคัญบางอย่างเมื่อมันมาถึงคำถามอายุ 100% สูง ฉันต้องยอมรับว่าฉันใช้โซลูชั่นนี้เมื่อถึงกำหนด แต่ก็รู้สึกเหมือนฉันยอมแพ้เสมอ

— Scott Greenfield

6

@Scott: ฉันเคยเสียเวลาสามสัปดาห์ในการพยายามออกแบบให้มีความสูง 100% ในเบราว์เซอร์หลักสามตัว ฉันไม่สามารถได้ยิน "พล่ามชั่วร้าย" พล่ามอีกต่อไป :-( ถึงแม้จะมีความรู้ของฉันการใช้ DIVs ก็ซับซ้อนเกินไป

— Aaron Digulla

1

การวางแผนที่เหมาะสมทำให้มั่นใจได้ว่าไม่จำเป็นต้องพึ่งพาตาราง ตอนนี้ในปี 2555 อุตสาหกรรมทั้งหมดผลักดัน IE6 / 7 ที่ผ่านมาฉันขอแนะนำไม่ให้ใช้ตารางความสูง 100%!

— Vael Victus

4

คุณไม่ต้องใช้ <table> คุณสามารถใช้ <div style = "display: table;" : D

— Wilf

8

ใช้ตำแหน่งที่แน่นอน โปรดทราบว่านี่ไม่ใช่วิธีการที่เราคุ้นเคยกับการใช้ตำแหน่งสัมบูรณ์ซึ่งต้องการการจัดวางสิ่งต่าง ๆ ด้วยตนเองหรือมีบทสนทนาแบบลอยตัว สิ่งนี้จะยืดโดยอัตโนมัติเมื่อคุณปรับขนาดหน้าต่างหรือเนื้อหา ฉันเชื่อว่าต้องใช้โหมดมาตรฐาน แต่จะทำงานใน 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 ภายนอกถูกยืดออกโดยเนื้อหาของ div 'เนื้อหา' แถบนำทางใช้การกำหนดตำแหน่งแบบสัมบูรณ์เพื่อยืดตัวเองออกไปจนถึงความสูงของพาเรนต์ สำหรับการจัดตำแหน่งแนวนอนเราทำให้ div เนื้อหาชดเชยตัวเองด้วยความกว้างเดียวกันของ navbar

สิ่งนี้ทำให้ง่ายขึ้นด้วย CSS3 flex box model แต่ยังไม่พร้อมใช้งานใน IE และมีนิสัยแปลก ๆ

— tstanis
แหล่งที่มา

สวัสดี tstanis ผมทดสอบบน IE6 และ navbar ไม่ยืด สำหรับ FireFox นั้น Chrome ใช้งานได้ดีมาก

— ลูคัสพอตเตอร์สกี้

บน IE6 ให้ใช้ตารางหรือ JavaScript หรือสวิตช์ของเบราว์เซอร์เว้นแต่ว่าคุณได้ทำสิ่งนี้มาหลายสิบครั้งแล้ว

— Aaron Digulla

7

ฉันพบปัญหาเดียวกันกับคุณ ฉันต้องการที่จะทำให้DIVเป็นพื้นหลังทำไมเพราะง่ายต่อการจัดการ div ผ่าน javascript ยังมีสามสิ่งที่ฉันทำใน CSS สำหรับกองนั้น

CSS:

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

— Talha
แหล่งที่มา

6

หากคุณกำหนดเป้าหมายเบราว์เซอร์ที่ทันสมัยกว่าชีวิตอาจเป็นเรื่องง่าย ลอง:

.elem{    
    height: 100vh;
 }

หากคุณต้องการที่ 50% ของหน้าแทนที่ 100 ด้วย 50

— อดัม Boostani
แหล่งที่มา

4

นี่ถือว่าความสูงของหน้าเท่ากับความสูงของหน้าจอ หน้าเว็บมักจะยาวเกินความสูงของหน้าจอบ่อยครั้งดังนั้นเราจึงเลื่อนลง

— TidyDev

5

ฉันต้องการที่จะครอบคลุมหน้าเว็บทั้งหมดก่อนที่จะให้ป๊อปอัพเป็นกิริยาช่วย ฉันลองวิธีการมากมายโดยใช้ 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>

ขยายตัวอย่างข้อมูล

โชคดี ;-)

— จงเชิงดง
แหล่งที่มา

2

* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}

— Swadesh Behera
แหล่งที่มา

1

 
           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>

ขยายตัวอย่างข้อมูล

— reaw_ni
แหล่งที่มา

โปรดเพิ่มคำอธิบายให้กับคำตอบของคุณโดยแสดงให้เห็นว่ามันทำอะไรและมันแก้ปัญหาได้อย่างไร

— Our Man in Bananas

div "หน้า" สูง 100% ทุกแพลตฟอร์ม เพียงคัดลอกสคริปต์ js ไปยังแท็ก <script> </script> แล้ววางในโค้ด HTML

— reaw_ni

0

ง่ายเพียงแค่ห่อมันใน div table ...

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>

— Steffan Perry
แหล่งที่มา