Twitter Bootstrap: div dalam wadah dengan tinggi 100%

129

Menggunakan twitter bootstrap (2), saya memiliki halaman sederhana dengan nav bar, dan di dalam containersaya ingin menambahkan div dengan tinggi 100% (ke bagian bawah layar). Css-fu saya sudah karatan, dan saya tidak bisa menyelesaikannya.

HTML sederhana:

<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 saat ini:

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

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}
  • EDIT *

Saya telah menambahkan tinggi ke kelas isian seperti yang disarankan di bawah ini. Tapi, masalahnya adalah bahwa saya menambahkan padding-top ke tubuh untuk menjelaskan navbar tetap di atas. Ini memengaruhi ketinggian 100% div "peta" dan berarti bilah gulir ditambahkan - seperti yang terlihat di sini: http://jsfiddle.net/S3Gvf/2/ Adakah yang bisa memberitahu saya cara memperbaikinya?

css twitter-bootstrap height Matt Roberts
sumber
1
Jadi Anda hanya ingin meregangkan div itu ke segala arah?
Andres Ilich
1
Ya, saya ingin mengisi ruang yang tersisa setelah nav div
Matt Roberts

Jawaban:

129

Atur kelas .fillmenjadiheight: 100%

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

JSFiddle

(Saya meletakkan latar belakang merah #mapagar Anda dapat melihatnya membutuhkan ketinggian 100%)

Horen
sumber
Terima kasih, akan mencobanya nanti dan laporkan kembali. Tidak percaya saya melewatkan perbaikan sederhana itu :)
Matt Roberts
2
Terima kasih, jenis pekerjaan ini, tetapi nav bootstrap twitter, yang posisinya tetap, membuat peta tidak aktif - Anda perlu menggulir ke bawah. Saya tidak tahu bagaimana membuat span div ke seluruh ruang layar yang tersedia MINUS nav bar.
Matt Roberts
2
jsfiddle.net/S3Gvf/4 digunakan box-sizing:border-box;pada elemen dengan padding (body tag) untuk penyelesaian yang mudah
Horen
1
Saya tidak terlalu yakin bagaimana voodoo css3 itu bekerja, tetapi bekerja ya :) Terima kasih banyak!
Matt Roberts
1
#Map sebenarnya dikaburkan di belakang navbar dalam contoh ini.
Ethereal
37

Perbarui 2019

Dalam Bootstrap 4 , flexbox dapat digunakan untuk mendapatkan tata letak tinggi penuh yang mengisi ruang yang tersisa.

Pertama-tama, wadah (induk) harus tinggi penuh:

Opsi 1_ Tambahkan kelas untuk min-height: 100%;. Ingatlah bahwa tinggi minimum hanya akan berfungsi jika induk memiliki tinggi yang ditentukan:

html, body {
  height: 100%;
}

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

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

Opsi 2_ Gunakan vhsatuan:

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

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

Kemudian, gunakan kolom arah flexbox d-flex flex-columnpada wadah, dan flex-grow-1pada div anak mana pun (yaitu :) rowyang ingin Anda isi ketinggian yang tersisa.

Lihat juga:
Bootstrap 4 Navbar dan isi flexbox tinggi isi
Bootstrap - Isi wadah cairan antara header dan footer
Bagaimana membuat peregangan baris tetap tinggi

Zim
sumber
Mengapa tampaknya kedua pendekatan ini berlawanan dengan intuisi untuk sekadar membuat wadah kedua yang mengambil sisa ketinggian bagian bawah jendela? Seharusnya ada fleksibilitas bagi pengembang untuk melakukan apa pun yang mereka inginkan dengan bootstrap di ruang yang diberikan di atas.
klewis
Apakah Anda benar-benar berpikir ini layak untuk downvote? "hanya membuat wadah kedua yang mengambil sisa ketinggian bagian bawah jendela" .. apakah Anda punya contoh bagaimana itu akan bekerja? seluruh titik height:100%tidak hanya mengkonsumsi sisa ketinggian bagian bawah, tetapi malah mengkonsumsi 100% dari tinggi viewport membuat scrollbar vertikal. Itu sebabnya peta membutuhkan scolling ke bawah dalam jawaban yang diterima.
Zim
Anda adalah pengembang yang disegani di formulir ini untuk BootStrap. Saya tidak menurunkan suara Anda, orang lain melakukannya. Saya hanya terkejut dengan jawaban Anda karena sebagian besar jawaban Anda sangat dipilih. Saya berharap saya punya contoh bagaimana itu bekerja. Saya belum menemukan apa pun, tetapi alangkah baiknya jika flexbox memang memiliki cara mudah untuk mengisi elemen yang lain di bagian bawah halaman. Terima kasih telah mencoba memberikan jawaban, saya hanya akan menganggap kami ada di sana dengan mudah menerapkan ini. Saya kira tidak :)
klewis
1
Ok, seperti yang dinyatakan dalam jawaban "gunakan kolom arah flexbox d-flex flex-kolom pada wadah, dan flex-grow-1 pada div anak-anak (yaitu: baris) yang Anda ingin mengisi ketinggian yang tersisa" ... the orang tua adalah tinggi 100% seperti yang dijelaskan
Zim
3

Ini sangat sederhana. Kamu bisa memakai

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

Anda dapat mengubah ketinggian sesuai dengan kebutuhan Anda.

Sumit Kumar Gupta
sumber
1

Anda perlu menambahkan padding-top ke elemen "fill", ditambah add box-sizing: border-box - contoh di sini bootply

mamezito
sumber