Div chiều cao 100% và mở rộng để phù hợp với nội dung

Tôi có một yếu tố div trên trang của mình với chiều cao được đặt thành 100%. Chiều cao của cơ thể cũng được đặt thành 100%. Div bên trong có một nền tảng và tất cả những điều đó và khác với nền cơ thể. Điều này hoạt động để làm cho chiều cao div 100% chiều cao màn hình trình duyệt, nhưng vấn đề là tôi có nội dung bên trong div đó kéo dài theo chiều dọc vượt quá chiều cao màn hình trình duyệt. Khi tôi cuộn xuống, div kết thúc tại điểm mà bạn phải bắt đầu cuộn trang, nhưng nội dung vượt quá điều đó. Làm thế nào để tôi làm cho div luôn luôn đi đến tận cùng để phù hợp với nội dung bên trong?

Đây là một sự đơn giản hóa CSS của tôi:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

Khi tôi cuộn trang, màu đen kết thúc và nội dung chảy trên nền đỏ. Dường như không quan trọng tôi đặt positon thành tương đối hay tuyệt đối trên #some_div, vấn đề xảy ra theo một trong hai cách. Nội dung bên trong #some_div hầu hết được định vị hoàn toàn và nó được tạo động từ cơ sở dữ liệu để không thể biết trước chiều cao của nó.

Chỉnh sửa: Đây là một ảnh chụp màn hình của vấn đề:

Đây là những gì bạn nên làm theo phong cách CSS, trên chính div

display: block;
overflow: auto;

Và đừng chạm vào height

Đặt heightthành autovà min-heightđến 100%. Điều này sẽ giải quyết nó cho hầu hết các trình duyệt.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

Thông thường, vấn đề này phát sinh khi các phần tử Con của Div mẹ được thả nổi. Đây là giải pháp mới nhất của vấn đề:

Trong tệp CSS của bạn, hãy viết lớp sau có tên .clearfix cùng với bộ chọn giả : sau

.clearfix:after {
content: "";
display: table;
clear: both;
}

Sau đó, trong HTML của bạn, thêm lớp .clearfix vào Div cha của bạn. Ví dụ:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Nó nên hoạt động luôn. Bạn có thể gọi tên lớp là .group thay vì .clearfix , vì nó sẽ làm cho mã có ngữ nghĩa hơn. Lưu ý rằng, Không cần thiết phải thêm dấu chấm hoặc thậm chí là khoảng trắng trong giá trị Nội dung giữa dấu ngoặc kép "". Ngoài ra, tràn: tự động; có thể giải quyết vấn đề nhưng nó gây ra các vấn đề khác như hiển thị thanh cuộn và không được khuyến nghị.

Nguồn: Blog của Lisa Catalano và Chris Coyier

Nếu bạn chỉ rời height: 100%và sử dụng display:block;các divsẽ mất không gian nhiều càng tốt các nội dung bên trong div. Bằng cách này, tất cả các văn bản sẽ ở trong nền đen.

Câu hỏi này có thể cũ, nhưng nó xứng đáng được cập nhật. Đây là một cách khác để làm điều đó:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

Thử cái này:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
} 

IE6 và các phiên bản trước đó không hỗ trợ thuộc tính min-height.

Tôi nghĩ vấn đề là khi bạn bảo cơ thể có chiều cao 100%, nền của nó chỉ có thể cao bằng chiều cao của một "khung nhìn" của trình duyệt (khu vực xem không bao gồm các thanh công cụ & thanh công cụ & thanh công cụ của trình duyệt và cạnh cửa sổ). Nếu nội dung cao hơn một khung nhìn, nó sẽ vượt quá chiều cao dành cho nền.

Thuộc tính chiều cao tối thiểu này trên cơ thể sẽ tạo ra nền tối thiểu cao bằng một khung nhìn nếu nội dung của bạn không lấp đầy toàn bộ một trang xuống phía dưới, nhưng nó cũng nên để nó phát triển xuống dưới để bao quát thêm nội dung bên trong.

Câu hỏi cũ, nhưng trong trường hợp của tôi, tôi thấy sử dụng position:fixednó đã giải quyết nó cho tôi. Tình hình của tôi có thể có một chút khác biệt mặc dù. Tôi đã có một lớp phủ bán trong suốt divvới hình ảnh động đang tải mà tôi cần hiển thị trong khi trang đang tải. Vì vậy, sử dụng height:auto / 100%hoặc min-height: 100%cả hai lấp đầy cửa sổ nhưng không phải là khu vực ngoài màn hình. Sử dụng position:fixedđã thực hiện cuộn lớp phủ này với người dùng, vì vậy nó luôn bao phủ vùng hiển thị và giữ cho hình ảnh động tải trước của tôi tập trung vào màn hình.

Chỉ cần thêm hai dòng này vào id css của bạn #some_div

display: block;
overflow: auto;

Sau đó, bạn sẽ nhận được những gì bạn đang tìm kiếm!

Tôi không hoàn toàn chắc chắn rằng tôi đã hiểu câu hỏi bởi vì đây là một câu trả lời khá đơn giản, nhưng ở đây đi ... :)

Bạn đã thử đặt thuộc tính tràn của container thành hiển thị hoặc tự động chưa?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

Thêm vào đó sẽ đẩy container đen đến bất kỳ kích thước nào mà container động của bạn yêu cầu. Tôi thích tự động hiển thị hơn vì tự động dường như đi kèm với thanh cuộn ...

Các trình duyệt hiện đại hỗ trợ đơn vị "chiều cao khung nhìn". Điều này sẽ mở rộng div đến chiều cao khung nhìn có sẵn. Tôi thấy nó đáng tin cậy hơn bất kỳ phương pháp nào khác.

#some_div {
    height: 100vh;
    background: black;
}

Thậm chí bạn có thể làm như thế này

display:block;
overflow:auto;
height: 100%;

Điều này sẽ bao gồm mỗi div động của bạn theo nội dung. Giả sử nếu bạn có một div chung với lớp, nó sẽ tăng chiều cao của mỗi div động theo nội dung

Bạn cũng có thể dùng

 display: inline-block;

của tôi đã làm việc với điều này

TỔNG QUAN KHÔNG CÓ VỊ TRÍ: CỐ ĐỊNH

Một cách thực sự thú vị mà tôi đã tìm ra điều này cho một thực đơn gần đây là đặt cơ thể thành:

position: relative

và thiết lập lớp bao bọc của bạn như thế này:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

Điều này có nghĩa là bạn không phải đặt vị trí cố định và vẫn có thể cho phép cuộn. Tôi đã sử dụng điều này cho lớp phủ thực đơn lớn.

sử dụng flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

Ok, tôi đã thử một cái gì đó như thế này:

cơ thể (bình thường)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

Đây không phải là cách chính xác để viết nó, nhưng nếu bạn tạo màn hình div chính dưới dạng bảng, nó sẽ mở rộng và sau đó tôi triển khai các thanh cuộn.