2139

ฉันมีเลย์เอาต์ที่มีสองคอลัมน์ - ซ้ายdivและขวาdivและขวา

ด้านขวาdivมีสีเทาbackground-colorและฉันต้องการมันเพื่อขยายในแนวตั้งขึ้นอยู่กับความสูงของหน้าต่างเบราว์เซอร์ของผู้ใช้ ตอนนี้จุดbackground-colorสิ้นสุดของเนื้อหาชิ้นสุดท้ายในนั้นdivปลายที่ชิ้นสุดท้ายของเนื้อหาในการที่

ฉันได้พยายามheight:100%, min-height:100%;ฯลฯ

html css height

— ไมค์
แหล่งที่มา

7

อาจคุณจะพบคำถามนี้มีประโยชน์stackoverflow.com/questions/1366548/…

— Ivan Nevostruev

วิธีที่ดีที่จะไป แต่ vh, vw หน่วยอื่น ๆ เป็นที่รู้กันว่าเป็นรถ มีทางเลือกน้ำหนักเบา js นี้หากคุณต้องการ: joaocunha.github.io/vunit

— ดูคมชัด

นี่คือคำอธิบายที่ง่ายและชัดเจนของheightคุณสมบัติCSS พร้อมค่าเปอร์เซ็นต์: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

คุณสามารถใช้ความสูง: 100vh; ทรัพย์สิน CSS

— Vishnu Chauhan

2833

มีหน่วยการวัด CSS 3 สองสามตัวที่เรียกว่า:

Viewport-Percentage (หรือ Viewport-Relative)ความยาว

ความยาวร้อยละของวิวพอร์ตคืออะไร

จากคำแนะนำผู้สมัคร W3 ที่เชื่อมโยงด้านบน:

ความยาวร้อยละ viewport มีความสัมพันธ์กับขนาดของบล็อกเริ่มต้นที่มี เมื่อความสูงหรือความกว้างของบล็อกเริ่มต้นที่มีการเปลี่ยนแปลงพวกเขาจะถูกปรับตาม

หน่วยเหล่านี้คือvh(ความสูงวิวพอร์ต), vw(ความกว้างวิวพอร์ต), vmin(ความยาวต่ำสุดของวิวพอร์ต) และvmax (ความยาวสูงสุดวิวพอร์ต)

วิธีนี้จะใช้ในการทำให้ตัวแบ่งเติมความสูงของเบราว์เซอร์ได้อย่างไร

สำหรับคำถามนี้เราสามารถใช้vh: 1vhเท่ากับ 1% ของความสูงวิวพอร์ต กล่าวคือ,100vhคือเท่ากับความสูงของหน้าต่างเบราว์เซอร์ไม่ว่าองค์ประกอบจะอยู่ที่ใดในแผนผัง DOM:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

แท้จริงนี่คือทั้งหมดที่จำเป็น นี่คือตัวอย่างของJSFiddle ที่ใช้งานอยู่

เบราว์เซอร์ใดบ้างที่สนับสนุนหน่วยใหม่เหล่านี้

ปัจจุบันนี้รองรับเบราว์เซอร์หลักที่ทันสมัยทั้งหมดนอกเหนือจาก Opera Mini ลองดูฉันสามารถใช้ ...เพื่อการสนับสนุนเพิ่มเติมได้ไหม

วิธีนี้สามารถใช้กับหลายคอลัมน์ได้อย่างไร

ในกรณีของคำถามที่อยู่ในมือที่มีด้านซ้ายและแบ่งที่เหมาะสมที่นี่เป็นตัวอย่าง JSFiddleแสดงรูปแบบสองคอลัมน์ที่เกี่ยวข้องกับทั้งสองและvhvw

เป็นวิธีการ`100vh`ที่แตกต่างกันไป`100%` ?

ใช้เค้าโครงนี้เช่น:

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

pแท็กที่นี่ถูกตั้งไว้ที่ความสูง 100% แต่เพราะมีของมันdivมี 200 พิกเซลความสูง 100% ของ 200 พิกเซลจะกลายเป็น 200 พิกเซล, ไม่ 100% ของbodyความสูง ใช้100vhแทนหมายความว่าpแท็กจะสูง 100% bodyโดยไม่คำนึงถึงdivความสูง ดูที่JSFiddle ที่มาพร้อมกับนี้เพื่อดูความแตกต่างได้อย่างง่ายดาย!

— James Donnelly
แหล่งที่มา

35

พฤติกรรมแปลก ๆ พร้อมการเลื่อนเมื่อองค์ประกอบสูงกว่าวิวพอร์ต ภาชนะรักษาความสูง viewport และเนื้อหาไหลออกจากภาชนะ min-height:100vhดูเหมือนว่าจะหลีกเลี่ยงปัญหานี้

— wdm

8

@DGDD สามารถใช้กับ iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 และ IEMobile 10.0 ฉันไม่ทราบว่าเบราว์เซอร์มือถือตัวใดที่คุณอ้างถึง แต่เบราว์เซอร์ 4 ตัวนั้นใช้งานได้มากกว่า 90% ของเบราว์เซอร์มือถือที่ใช้ คำถามนี้ไม่ได้ระบุข้อกำหนดสำหรับการทำงานบนเบราว์เซอร์มือถือ

— James Donnelly

1

@ robross0606 อีกครั้งนั่นไม่ใช่คำถามที่ฉันตอบที่นี่ นั่นเป็นคำถามที่แตกต่างกันโดยสิ้นเชิงซึ่งคำตอบใช้ flexbox แน่นอน: stackoverflow.com/questions/90178/…

— James Donnelly

1

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

— RedClover

3

การแจ้งเตือนมือถือ: การใช้ vh mess กับ Chrome mobile ซึ่งไม่คำนึงถึง navbar จากนั้นครอบคลุมส่วนบนของหน้าเว็บด้วย ปัญหาร้ายแรงหากคุณมีเมนูอยู่ที่นั่น ...

— ยืนยัน

568

หากคุณต้องการตั้งค่าความสูงของ a <div>หรือองค์ประกอบใด ๆ คุณควรกำหนดความสูงของ<body>และ<html>เป็น 100% ด้วย จากนั้นคุณสามารถตั้งค่าความสูงขององค์ประกอบด้วย 100% :)

นี่คือตัวอย่าง:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— Ariona Rian
แหล่งที่มา

109

แก้ไขฉันถ้าฉันผิด แต่ฉันคิดว่าคุณต้องตั้งค่าความสูงให้กับผู้ปกครองทั้งหมดของ div เพื่อใช้งานได้จริง

— Dany Y

สิ่งนี้จะไม่ทำงานหากฉันใช้การออกแบบต่อเนื่อง: ความสูงหน้า 6,000 พิกเซลพร้อมบล็อกที่แสดงหน้า ฉันต้องการให้บล็อกหนึ่งบล็อกมีความสูงของวิวพอร์ตอย่างแน่นอน

— Qwerty

@ DanyY คุณพูดถูก คุณจำเป็นต้องตั้งค่าความสูงให้กับผู้ปกครองทั้งหมดของแผนกด้วยความหมายของทุกสิ่งที่มีความสูงของหน้าจอ นี่คือตัวอย่าง

— toto_tico

เคล็ดลับนี้ใช้งานได้ในบางกรณี แต่ก็ไม่ได้สำหรับบางกรณีเช่นกันหากคุณค้นหาความเข้ากันได้หรือวิธีที่แนะนำเพิ่มเติมคุณสามารถดู @ Answer คำตอบของ James ด้านบน :) โดยใช้วิธีการร้อยละ Viewport :) นั่นก็ควรใช้เช่นกัน ไชโย

— Ariona Rian

8

@Qwerty นี่คือทางออก ชุด CSS html { height: 100%*number of blocks; }เป็นดังนั้น: body { height: 100%;}, #div { height: 100%/number of blocks; }, ดังนั้นถ้าคุณมี 3 ส่วนมันจะเป็นhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb

283

หากคุณสามารถวางตำแหน่งองค์ประกอบของคุณได้อย่างแน่นอน

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

จะทำมัน

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

16

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

— Ricky Boyce

1

ไม่ทำงานเมื่อผู้ปกครองรายหนึ่งตั้งค่าไว้position:relativeและความสูงไม่เท่ากับ 100% ของวิวพอร์ต มันจะปรับด้านบนและด้านล่างเพื่อเป็นญาติหรือบรรพบุรุษแน่นอน

— Seika85

141

คุณสามารถใช้หน่วย view-port ใน CSS:

HTML:

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

CSS:

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

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

1

@ Lamar คุณควรใช้* { box-sizing: border-box; }เพื่อป้องกันไม่ให้เกิดขึ้น

— Luca Steeb

2

ควรตรวจสอบ caniuse สำหรับการสนับสนุนเบราว์เซอร์ในหน่วย viewport: caniuse.com/#feat=viewport-units

— Dave Everitt

133

คุณสามารถใช้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>

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

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

การให้ 100vh เพิ่มการเลื่อนในแนวตั้งสำหรับหน้าดังนั้นลองติดตามดู แต่ไม่ได้ผล stackoverflow.com/questions/44645465/… . มีวิธีใดบ้างที่จะหลีกเลี่ยงการเลื่อนแนวตั้งและให้ div แตะด้านล่างโดยไม่มีเนื้อหาใด ๆ

— DILEEP THOMAS

@DILEEPTHOMAS ค้นหาที่มีอยู่paddings/margins

— ตำนาน

@Legends ที่ไฟล์ root ฉันพยายามให้เป็น * {margin: 0, padding: 0} แต่ไม่ทำงาน

— DILEEP THOMAS

1

@DILEEPTHOMAS ลองดูตัวอย่างนี้ที่นี่โดย Alireza มันมี scrollbar เพราะองค์ประกอบของร่างกายมีระยะขอบ หากคุณลบขอบแถบเลื่อนจะหายไป อาจมีสาเหตุที่แตกต่างกัน แต่อันนี้ฉันจะเช็คเอาท์ก่อน

— ตำนาน

102

โซลูชันอื่น ๆ ทั้งหมดรวมถึงโซลูชันที่ได้รับการโหวตเป็นอันดับหนึ่งvhจะดีที่สุดเมื่อเทียบกับรุ่นเฟล็กซ์โซลูชัน

ด้วยการกำเนิดของCSS flex modelการแก้ปัญหาความสูง 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>

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

เรียนรู้เพิ่มเติมเกี่ยวกับโมเดลยืดหยุ่นได้ที่นี่

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

3

คำเตือน: เมื่อเนื้อหาของหนึ่งในภาชนะด้านซ้าย / ขวาเกินความสูงของร่างกายเดิมคอนเทนเนอร์ตรงข้ามจะไม่ได้รับการปรับขนาดดังนั้นคอนเทนเนอร์จะจบลงด้วยความสูงที่แตกต่างกัน

— schellmax

1

ตัวอย่างของปัญหา Schellmax ชี้ให้เห็น: jsfiddle.net/Arete/b4g0o3pq

— Arete

ทั้งนี้ขึ้นอยู่กับการออกแบบที่overflow-y: auto;อาจหลีกเลี่ยง "ภาชนะบรรจุเกินความสูงของร่างกายเดิม"

— Evi Song

54

คุณไม่ได้พูดถึงรายละเอียดที่สำคัญบางอย่างเช่น:

เค้าโครงมีความกว้างคงที่หรือไม่
ความกว้างคงที่ทั้งคอลัมน์หรือทั้งสองอย่าง?

นี่คือความเป็นไปได้หนึ่งอย่าง:

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>

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

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

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

34

นี่คือสิ่งที่ได้ผลสำหรับฉัน:

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

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

ใช้position:fixedแทนposition:absoluteวิธีนั้นแม้ว่าคุณจะเลื่อนลงไปที่ส่วนจะขยายไปยังส่วนท้ายของหน้าจอ

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

รหัสนี้ที่มีตำแหน่ง ": [คงที่ | แน่นอน]" เหมาะสำหรับพื้นหลังของป๊อปอัป (เช่นเมื่อคุณคลิกเพื่อซูมภาพ) แต่ไม่แน่ใจในกรณีที่คุณต้องเลื่อนลง แป้งยังมีประโยชน์!

— Mannyfatboy

29

นี่คือการแก้ไขสำหรับความสูง

ในการใช้ 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'});
    }
});

— Jonas Sandstedt
แหล่งที่มา

23

100% ทำงานแตกต่างกันสำหรับความกว้างและความสูง

เมื่อคุณระบุwidth: 100%มันหมายถึง "รับ 100% ของความกว้างที่มีอยู่จากองค์ประกอบหลักหรือความกว้างของหน้าต่าง"

เมื่อคุณระบุheight: 100%จะหมายถึง "รับความสูง 100% จากองค์ประกอบหลักเท่านั้น" ซึ่งหมายความว่าหากคุณไม่ได้ระบุความสูงที่องค์ประกอบระดับบนสุดความสูงของลูกทั้งหมดจะเป็น0ความสูงของผู้ปกครองและนั่นคือสาเหตุที่คุณต้องตั้งค่าองค์ประกอบสูงสุดให้มีmin-heightความสูงของหน้าต่าง

ฉันมักจะระบุร่างกายให้มีความสูงขั้นต่ำ 100vh และทำให้การวางตำแหน่งและการคำนวณง่ายขึ้น

body {
  min-height: 100vh;
}

— Dinesh Pandiyan
แหล่งที่มา

16

เพิ่มmin-height: 100%และไม่ระบุความสูง (หรือวางไว้ที่อัตโนมัติ) มันทำงานให้ฉันโดยสิ้นเชิง:

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

— Remus Simion
แหล่งที่มา

16

100vw === 100% ของความกว้างของวิวพอร์ต

100vh === 100% ของความสูงของวิวพอร์ต

หากคุณต้องการตั้งค่าdivความกว้างหรือความสูง 100% ของขนาดหน้าต่างเบราว์เซอร์คุณควรใช้:

สำหรับความกว้าง: 100vw

สำหรับความสูง: 100vh

หรือถ้าคุณต้องการตั้งค่าขนาดที่เล็กลงให้ใช้calcฟังก์ชันCSS ตัวอย่าง:

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

— Руслан
แหล่งที่มา

12

มีหลายวิธีสำหรับการตั้งค่าความสูงของ a <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>

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

วิธีการ (B) ใช้ vh:

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) โดยใช้ flex box:

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>

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

— Santosh Khalse
แหล่งที่มา

12

สิ่งนี้ใช้ได้กับฉัน:

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

นำมาจากหน้านี้

— การทดสอบ
แหล่งที่มา

12

วิธีที่ง่ายที่สุดคือทำเช่นนี้

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

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

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

11

ลองตั้งค่าheight:100%ในhtml&body

html, 
body {
    height: 100%;
}

และถ้าคุณต้องการ 2 div height ใช้หรือตั้งค่าdisplay:flexคุณสมบัติองค์ประกอบหลัก

— โมฮัมเหม็ดเว็ด
แหล่งที่มา

9

แม้จะมีคำตอบทั้งหมดที่นี่ฉันก็แปลกใจที่พบว่าไม่มีใครแก้ปัญหาได้จริงๆ หากฉันใช้100vh height/ min-heightรูปแบบจะแตกเมื่อเนื้อหามีความยาวมากกว่าหนึ่งหน้า หากฉันใช้100% height/ แทนmin-heightเลย์เอาต์ก็จะแตกเมื่อเนื้อหาน้อยกว่าความสูงของหน้า

วิธีแก้ปัญหาที่ฉันพบซึ่งแก้ไขทั้งสองกรณีคือการรวมคำตอบสองข้อแรก:

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

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

1

ฉันมี navbar สูง 90px คงที่ดังนั้นฉันต้องเปลี่ยน "100vh" เป็น "calc (100vh - 90px)"

— Mark Jackson

8

เพียงใช้หน่วย "vh" แทน "px" ซึ่งหมายถึงความสูงของพอร์ตการดู

height: 100vh;

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

7

องค์ประกอบบล็อกจะใช้ความกว้างเต็มของพาเรนต์ตามค่าเริ่มต้น

นี่คือวิธีที่พวกเขาตอบสนองความต้องการการออกแบบของพวกเขาซึ่งจะสแต็คในแนวตั้ง

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>

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

— Michael Benjamin
แหล่งที่มา

7

นี่คือสิ่งที่ไม่เหมือนกับสิ่งที่คุณมีในคำตอบก่อนหน้านี้ แต่อาจเป็นประโยชน์กับบางคน:

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/

— newdark มัน
แหล่งที่มา

6

ใช้ FlexBox CSS

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

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

6

หนึ่งในตัวเลือกคือการใช้ตาราง 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>

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

— สติกเกอร์
แหล่งที่มา

6

ลองสิ่งนี้ - ทดสอบแล้ว:

body {
  min-height: 100%;
}

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

แก้ไข: อัพเดต 2020:

คุณสามารถใช้vhตอนนี้:

#right, #left {
  height: 100vh
}

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

5

คุณสามารถใช้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>

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

— Thuc Nguyen
แหล่งที่มา

มีโซลูชันเฟล็กบ็อกซ์หลายตัวที่โพสต์รวมถึงโซลูชันที่มีการติดตั้งที่ถูกต้องนี้เพียง 26 วันก่อนคำตอบนี้

— TylerH

5

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

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

แหล่ง

— ปราปาการ์ Undurthi
แหล่งที่มา

3

โซลูชันที่ล้าสมัย ใช้vhแทน

— avalanche1

1

อย่าใช้vhถ้าคุณวางแผนที่จะใช้การออกแบบที่ตอบสนองบนอุปกรณ์มือถือ

— Alexander Kim

5

ลอง CSS ต่อไปนี้:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

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

5

ที่จริงสิ่งที่ได้ผลดีที่สุดสำหรับฉันคือการใช้vhคุณสมบัตินี้

ในแอปพลิเคชันตอบกลับของฉันฉันต้องการให้ div จับคู่หน้าสูงแม้ในขณะที่ปรับขนาด ฉันพยายามheight: 100%;, overflow-y: auto;แต่ไม่มีของพวกเขาทำงานเมื่อตั้งค่าheight:(your percent)vh;การทำงานตามที่ตั้งใจไว้

หมายเหตุ: หากคุณใช้ช่องว่างภายใน, มุมโค้งมน ฯลฯ ตรวจสอบให้แน่ใจว่าได้ลบค่าเหล่านั้นออกจากvhเปอร์เซ็นต์คุณสมบัติของคุณหรือเพิ่มความสูงเป็นพิเศษและทำให้แถบเลื่อนปรากฏขึ้น นี่คือตัวอย่างของฉัน:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

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

โดยวิธีการที่คุณพูดถึง 'มุมโค้งมน' ที่มีผลต่อความสูงขององค์ประกอบของคุณฉันคาดว่าการตั้งค่าbox-sizing: border-box;จะเอาชนะสิ่งนี้ก็หมายความว่าขนาดของเส้นขอบนั้นจะถูกนำมาพิจารณาด้วยเมื่อคำนวณขนาด (ความกว้างและความสูง) ขององค์ประกอบ

— Neek

5

ลองสิ่งนี้ครั้งเดียว ...

*{
  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>

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

— นิลราชบัท
แหล่งที่มา

3

หากคุณใช้position: absolute;และ jQuery คุณสามารถใช้

$("#mydiv").css("height", $(document).height() + "px");

— John Smith เป็นตัวเลือก
แหล่งที่มา

1

ไม่จำเป็นต้องใช้ JavaScript วิธีการแก้ปัญหาที่ทันสมัยคือการใช้CSS กล่องแบบเฟล็กซ์

— Dan Dascalescu

หากคุณใช้ JS ฉันพบว่าสิ่งนี้มีประโยชน์มาก หมายเหตุ: การใช้งานที่ดีที่สุดกับ $ (หน้าต่าง) .load () เนื่องจากคุณจะได้รับผลลัพธ์ที่แตกต่างกันโดยใช้ F5 หรือ CTRL + F5 ตรวจสอบลิงค์นี้สำหรับข้อมูลเพิ่มเติม stackoverflow.com/questions/13314058/…

— edward

2

HTML

   // 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>

CSS

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

— RamNiwas Sharma
แหล่งที่มา

1

การสะกดผิดที่เป็นไปได้: widht(ใกล้ถึงจุดสิ้นสุด)

— Peter Mortensen

วิธีสร้าง div ความสูง 100% ของหน้าต่างเบราว์เซอร์

Viewport-Percentage (หรือ Viewport-Relative)ความยาว

ความยาวร้อยละของวิวพอร์ตคืออะไร

วิธีนี้จะใช้ในการทำให้ตัวแบ่งเติมความสูงของเบราว์เซอร์ได้อย่างไร

HTML

CSS

เบราว์เซอร์ใดบ้างที่สนับสนุนหน่วยใหม่เหล่านี้

วิธีนี้สามารถใช้กับหลายคอลัมน์ได้อย่างไร

เป็นวิธีการ100vhที่แตกต่างกันไป100% ?

HTML

CSS

เป็นวิธีการ`100vh`ที่แตกต่างกันไป`100%` ?