Twitter Bootstrap: div trong container với chiều cao 100%

129

Sử dụng twitter bootstrap (2), tôi có một trang đơn giản với thanh điều hướng và bên trong containertôi muốn thêm một div với chiều cao 100% (ở dưới cùng của màn hình). Css-fu của tôi bị gỉ và tôi không thể làm việc này.

HTML đơn giản:

<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 hiện tại:

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

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

BIÊN TẬP *

Tôi đã thêm chiều cao cho lớp điền như đề xuất dưới đây. Nhưng, vấn đề là tôi thêm phần đệm vào phần thân để tính đến thanh điều hướng cố định ở trên cùng. Điều này ảnh hưởng đến chiều cao 100% của div "bản đồ" và có nghĩa là một thanh cuộn được thêm vào - như đã thấy ở đây: http://jsfiddle.net/S3Gvf/2/ Ai có thể cho tôi biết cách khắc phục không?

css twitter-bootstrap height

— Matt Roberts
nguồn

1

Vì vậy, bạn chỉ muốn kéo dài div đó theo mọi hướng?

— Andres Ilich

1

Vâng, tôi muốn nó lấp đầy khoảng trống còn lại sau div div

— Matt Roberts

129

Đặt lớp .fillthànhheight: 100%

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

Câu đố

(Tôi đặt nền đỏ #mapđể bạn có thể thấy nó chiếm chiều cao 100%)

— Horen
nguồn

Cảm ơn, sẽ thử điều đó sau và báo cáo lại. Không thể tin rằng tôi đã bỏ lỡ bản sửa lỗi đơn giản đó :)

— Matt Roberts

2

Cảm ơn, loại công việc này, nhưng điều hướng bootstrap twitter, vị trí cố định, làm cho bản đồ đi xuống dưới cùng - bạn cần phải cuộn xuống phía dưới. Tôi không biết cách tạo khoảng div cho toàn bộ không gian màn hình có sẵn MINUS thanh điều hướng.

— Matt Roberts

2

jsfiddle.net/S3Gvf/4 sử dụng box-sizing:border-box;trên phần tử với phần đệm (thẻ cơ thể) để giải quyết dễ dàng

— Horen

1

Tôi không chắc chắn làm thế nào mà css3 voodoo hoạt động, nhưng nó hoạt động :) Cảm ơn rất nhiều!

— Matt Roberts

1

#Map thực sự bị che khuất đằng sau thanh điều hướng trong ví dụ này.

— Ethereum

37

Cập nhật 2019

Trong Bootstrap 4 , flexbox có thể được sử dụng để có được bố cục chiều cao đầy đủ lấp đầy không gian còn lại.

Trước hết, container (cha mẹ) cần phải có chiều cao đầy đủ:

Tùy chọn 1_ Thêm một lớp cho min-height: 100%;. Hãy nhớ rằng chiều cao tối thiểu sẽ chỉ hoạt động nếu cha mẹ có chiều cao xác định:

html, body {
  height: 100%;
}

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

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

Tùy chọn 2_ Sử dụng vhđơn vị:

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

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

Sau đó, sử dụng cột hướng flexbox d-flex flex-columntrên container và flex-grow-1trên bất kỳ div con nào (tức là row:) mà bạn muốn điền vào chiều cao còn lại.

Xem thêm:
Bootstrap 4 Navbar và nội dung điền chiều cao flexbox
Bootstrap - Đổ đầy bình chứa chất lỏng giữa đầu trang và chân trang
Cách làm cho hàng kéo dài chiều cao còn lại

— Zim
nguồn

Tại sao dường như cả hai cách tiếp cận này đều phản trực giác khi chỉ cần tạo một thùng chứa thứ hai chiếm phần còn lại của chiều cao dưới cùng của cửa sổ? Cần có sự linh hoạt cho nhà phát triển để làm bất cứ điều gì họ muốn với bootstrap trong không gian đã cho ở trên.

— klewis

Bạn có thực sự nghĩ rằng điều này xứng đáng với một downvote? "chỉ đơn giản là tạo một thùng chứa thứ hai chiếm phần còn lại của chiều cao dưới cùng của cửa sổ" .. bạn có một ví dụ về cách nó sẽ hoạt động không? toàn bộ điểm height:100%không chỉ đơn giản là tiêu thụ phần còn lại của chiều cao dưới cùng, mà thay vào đó tiêu thụ 100% chiều cao của khung nhìn tạo ra một thanh cuộn dọc. Đó là lý do tại sao bản đồ đòi hỏi phải đi sâu xuống phía dưới trong câu trả lời được chấp nhận.

— Zim

bạn là một nhà phát triển được kính trọng trên các mẫu này cho BootStrap. Tôi đã không đánh giá thấp bạn, một người khác đã làm. Tôi chỉ ngạc nhiên với câu trả lời của bạn vì hầu hết các câu trả lời của bạn đều được bình chọn cao. Tôi ước tôi có một ví dụ về cách làm việc đó. Tôi chưa tìm thấy bất cứ điều gì, nhưng thật tuyệt nếu flexbox có cách dễ dàng lấp đầy phần còn lại của một phần tử vào cuối trang. Cảm ơn bạn đã cố gắng cung cấp một câu trả lời, tôi sẽ cho rằng chúng tôi đã ở đó để dễ dàng thực hiện điều này. Tôi đoán là không :)

— klewis

1

Ok, như đã nêu trong câu trả lời "sử dụng cột hướng flexbox d-flex flex-cột trên container và flex-grow-1 trên bất kỳ div con nào (ví dụ: hàng) mà bạn muốn lấp đầy chiều cao còn lại" ... cha mẹ có chiều cao 100% như đã giải thích

— Zim

3

Nó rất đơn giản. Bạn có thể dùng

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

Bạn có thể thay đổi chiều cao theo yêu cầu của bạn.

— Sumit Kumar Gupta
nguồn

1

bạn cần thêm phần tử đệm vào phần tử "điền", cộng với thêm kích cỡ hộp: viền hộp - mẫu ở đây bootply

— mamezito
nguồn