Twitter Bootstrap: div ในคอนเทนเนอร์ที่มีความสูง 100%

129

ใช้ twitter bootstrap (2) ฉันมีหน้าง่าย ๆ พร้อมแถบนำทางและcontainerฉันต้องการเพิ่ม div ที่มีความสูง 100% (ที่ด้านล่างของหน้าจอ) css-fu ของฉันเป็นสนิมและฉันไม่สามารถทำงานได้

HTML แบบง่าย:

<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

CSS ปัจจุบัน:

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

แก้ไข *

ฉันได้เพิ่มความสูงให้กับคลาสเติมตามที่แนะนำด้านล่าง แต่ปัญหาคือฉันเพิ่ม padding-top ลงในเนื้อความเพื่อพิจารณา navbar คงที่ด้านบน สิ่งนี้มีผลต่อความสูง 100% ของ div "map" และหมายความว่าจะมีการเพิ่ม scrollbar - ดังที่เห็นที่นี่: http://jsfiddle.net/S3Gvf/2/ทุกคนสามารถบอกวิธีแก้ไขได้หรือไม่

css twitter-bootstrap height

— แมตต์โรเบิร์ต
แหล่งที่มา

1

ดังนั้นคุณต้องการยืด div นั้นในทุกทิศทาง?

— Andres Ilich

1

ใช่ฉันต้องการให้เติมช่องว่างที่เหลือหลังจาก div nav

— Matt Roberts

129

ตั้งค่าคลาส.fillเป็นheight: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(ฉันใส่พื้นหลังสีแดงเพื่อ#mapให้คุณสามารถเห็นความสูง 100%)

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

ขอบคุณจะลองทำใหม่ในภายหลังและรายงานกลับ ไม่สามารถเชื่อว่าฉันพลาดที่แก้ไขง่าย :)

— แมตต์โรเบิร์ต

2

ขอบคุณงานประเภทนี้ แต่ตัวสั่นด้วยความตื่นเต้น boot nav ซึ่งเป็นตำแหน่งที่คงที่ทำให้แผนที่หลุดจากด้านล่าง - คุณต้องเลื่อนไปที่ด้านล่าง ฉันไม่ทราบวิธีการทำให้ div ครอบคลุมพื้นที่หน้าจอทั้งหมดที่มีอยู่ลบด้วยแถบนำทาง

— Matt Roberts

2

jsfiddle.net/S3Gvf/4ใช้box-sizing:border-box;ในองค์ประกอบกับ padding (แท็กร่างกาย) สำหรับวิธีแก้ปัญหาง่าย

— Horen

1

ฉันไม่แน่ใจเหมือนกันว่า css3 voodoo นั้นใช้งานได้ดี แต่ทำงานได้ดี :) ขอบคุณมาก!

— Matt Roberts

1

#map ถูกบดบังจริงหลัง navbar ในตัวอย่างนี้

— เบาหวิว

37

อัปเดต 2019

ในBootstrap 4สามารถใช้ flexbox เพื่อรับเลย์เอาต์ความสูงเต็มที่เติมพื้นที่ที่เหลือ

ก่อนอื่นคอนเทนเนอร์(พาเรนต์)ต้องมีความสูง:

ตัวเลือก 1_ min-height: 100%;เพิ่มระดับสำหรับ โปรดทราบว่าความสูงขั้นต่ำจะใช้งานได้หากผู้ปกครองมีความสูงที่กำหนด:

html, body {
  height: 100%;
}

.min-100 {
    min-height: 100%;
}

https://www.codeply.com/go/dTaVyMah1U

ตัวเลือก 2_ ใช้vhหน่วย:

.vh-100 {
    min-height: 100vh;
}

https://www.codeply.com/go/kMahVdZyGj

จากนั้นใช้คอลัมน์ทิศทาง flexbox d-flex flex-columnบนคอนเทนเนอร์และflex-grow-1บนdiv ลูกใด ๆ(เช่น:) rowที่คุณต้องการเติมความสูงที่เหลือ

ดูเพิ่มเติมที่:
Bootstrap 4 Navbar และเนื้อหาการเติมเฟล็กบ็อกซ์ความสูง
Bootstrap - เติมของเหลวในภาชนะระหว่างส่วนหัวและท้ายกระดาษ
วิธีทำให้แถวยืดความสูงที่เหลืออยู่

— ซิม
แหล่งที่มา

ทำไมมันจึงดูเหมือนว่าวิธีการทั้งสองวิธีนี้เป็นวิธีที่ใช้ง่ายในการสร้างตู้คอนเทนเนอร์ที่สองซึ่งใช้เวลาที่เหลือของความสูงด้านล่างของหน้าต่าง ควรมีความยืดหยุ่นสำหรับนักพัฒนาในการทำสิ่งที่พวกเขาต้องการด้วย bootstrap ในพื้นที่ที่กำหนดข้างต้น

— klewis

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

— Zim

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

— klewis

1

ตกลงตามที่ระบุไว้ในคำตอบ "ใช้คอลัมน์ทิศทาง flexbox d-flex flex-column บนคอนเทนเนอร์และ flex-grow-1 ใน div ลูกใด ๆ (เช่น: แถว) ที่คุณต้องการเติมความสูงที่เหลือ" ... ผู้ปกครองมีความสูง 100% ตามที่อธิบายไว้

— Zim

3

มันง่ายมาก คุณสามารถใช้ได้

.fill .map 
{
  min-height: 100vh;
}

คุณสามารถเปลี่ยนความสูงได้ตามความต้องการของคุณ

— สุมิตรมาร์คุปตา
แหล่งที่มา

1

คุณต้องเพิ่มช่องว่างภายในเพื่อ "เติม" องค์ประกอบรวมทั้งเพิ่มขนาดกล่อง: เส้นขอบกล่อง - ตัวอย่างที่นี่bootply

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