เปอร์เซ็นต์ความสูง HTML 5 / CSS

176

ฉันกำลังพยายามตั้งค่า<div>ความสูงเป็นเปอร์เซ็นต์ที่แน่นอนใน CSS แต่มันก็ยังคงขนาดเดียวกันกับเนื้อหาที่อยู่ภายใน อย่างไรก็ตามเมื่อฉันลบ HTML 5 <!DOCTYTPE html>มันก็ใช้งานได้การ<div>ใช้ทั้งหน้าตามต้องการ ฉันต้องการให้หน้าตรวจสอบความถูกต้องแล้วฉันควรทำอย่างไร

ฉันมี CSS นี้ใน<div>ซึ่งมี ID ของpage:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

html css height

— D. Strout
แหล่งที่มา

3

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

— Michael Benjamin

แก้ไขปัญหา DOCTYPE: stackoverflow.com/a/32215263/3597276

— Michael Benjamin

371

ฉันกำลังพยายามตั้งค่า div เป็นความสูงที่แน่นอนใน CSS

เปอร์เซ็นต์ของอะไร

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

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

หากคุณต้องการทำให้ div ความสูงเป็นเปอร์เซ็นต์ของความสูงวิวพอร์ตทุกบรรพบุรุษของ div รวมถึง<html>และ<body>จำเป็นต้องมีheight: 100%ดังนั้นจึงมีสายโซ่ของความสูงร้อยละที่ชัดเจนถึง div

(*: หรือหาก div อยู่ในตำแหน่ง 'บล็อกที่มี' ซึ่งเป็นบรรพบุรุษที่ใกล้ที่สุดที่จะถูกจัดตำแหน่งด้วย)

หรือเบราว์เซอร์สมัยใหม่และ IE> = 9 รองรับหน่วย CSS ใหม่ที่สัมพันธ์กับความสูงของวิวพอร์ต ( vh) และความกว้างของวิวพอร์ต ( vw):

div {
    height:100vh; 
}

ดูที่นี่สำหรับข้อมูลเพิ่มเติม

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

แม้ว่าจะไม่ทำงานสำหรับการวางแนวหน้าจอแนวตั้งstackoverflow.com/questions/23198237/ …

— Dchris

1

โปรดดูคำตอบของ Brian Campbell ด้านล่างฉันเชื่อว่าเป็นคำตอบที่ถูกต้อง คำตอบนี้ดูเหมือนจะเป็นการแก้ปัญหาและไม่ได้แก้ไขปัญหาจริง

— นักพัฒนา MG

69

คุณต้องตั้งค่าความสูงของ<html>และ<body>องค์ประกอบเช่นกัน ไม่เช่นนั้นจะมีขนาดใหญ่พอที่จะใส่เนื้อหาได้ ตัวอย่างเช่น :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

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

— Brian Campbell
แหล่งที่มา

6

¬_¬ฉันใช้เวลา 20 นาทีในการหาว่าฉันต้องตั้งค่าความสูงของเอกสารเป็น 100% เช่นกัน ฉันอ่านมันช้าไปหน่อย แต่มันก็เยี่ยมมาก ถอนหายใจ

— omninonsense

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

— codefreaK

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

— นักพัฒนา MG

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

— nepdev

15

คำตอบของ bobince จะแจ้งให้คุณทราบว่าในกรณีใด "height: XX%;" จะหรือจะไม่ทำงาน

หากคุณต้องการที่จะสร้างองค์ประกอบที่มีอัตราส่วนชุดหนึ่ง (ความสูง:% ของมันคือความกว้างของตัวเอง) padding-bottomวิธีที่ดีที่สุดที่จะทำคือการตั้งค่าโดยมีประสิทธิภาพสูงโดยใช้ ตัวอย่างสำหรับสแควร์:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

คอนเทนเนอร์สี่เหลี่ยมจะทำจากการขยายและเนื้อหาจะขยายเพื่อเติมในคอนเทนเนอร์ บทความยาวจาก 2009 ในเรื่องนี้: http://alistapart.com/article/creating-intrinsic-ratios-for-video

— Olex Ponomarenko
แหล่งที่มา

มันใช้งานได้ดี นอกจากนี้ยังให้ความรู้สึกรวดเร็วในเบราว์เซอร์พร้อมปรับขนาดหน้าเว็บที่มีองค์ประกอบมากกว่า 100 รายการ ขอบคุณ!

— คณบดี grande

5

100vw / 100vhคุณสามารถใช้ CSS3 ทำให้เรามีหน่วยสัมพันธ์กับ viewport 100vw หมายถึง 100% ของความกว้างวิวพอร์ต 100vh; ความสูง 100%

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

— Ahmad Aghazadeh
แหล่งที่มา

4

Hi! ในการใช้เปอร์เซ็นต์ (%) คุณจะต้องกำหนด% ขององค์ประกอบหลัก หากคุณใช้body {height: 100%}จะไม่ทำงานเพราะ parent นั้นไม่มีเปอร์เซ็นต์ความสูง ในกรณีดังกล่าวเพื่อใช้ความสูงของร่างกายคุณต้องเพิ่มในhtml {height: 100%}

ในอีกกรณีหนึ่งเพื่อกำจัดเปอร์เซ็นต์ผู้ปกครองที่กำหนดคุณสามารถใช้

ร่างกาย {ความสูง: 100vh}

vhย่อมาจากความสูงวิวพอร์ต

ฉันคิดว่ามันช่วย

— Md. A. Barik
แหล่งที่มา

2

บางครั้งคุณอาจต้องการกำหนดความสูงของ div ตามเงื่อนไขเช่นเมื่อเนื้อหาทั้งหมดน้อยกว่าความสูงของหน้าจอ การตั้งค่าองค์ประกอบหลักทั้งหมดเป็น 100% จะตัดเนื้อหาเมื่อยาวกว่าขนาดหน้าจอ

ดังนั้นวิธีที่จะหลีกเลี่ยงสิ่งนี้คือการตั้งค่าความสูงขั้นต่ำ:

ดำเนินการต่อเพื่อให้องค์ประกอบหลักปรับความสูงโดยอัตโนมัติจากนั้นใน div หลักของคุณให้ลบขนาดพิกเซลของ div ส่วนหัวและส่วนท้ายจาก 100vh (หน่วยวิวพอร์ต) ใน CSS สิ่งที่ชอบ:

ความสูงขั้นต่ำ: Calc (100vh - 246px);

100vh เต็มความยาวของหน้าจอลบ divs ที่อยู่โดยรอบ ด้วยการตั้งค่าความสูงขั้นต่ำและไม่ใช่ความสูงเนื้อหาที่ยาวกว่าหน้าจอจะยังคงไหลต่อไปแทนที่จะถูกตัดออก

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