làm cho chiều cao của div mở rộng với nội dung của nó

376

Tôi có các div lồng nhau này và tôi cần thùng chứa chính để mở rộng (về chiều cao) để chứa các DIV bên trong

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

CSS là thế này:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

Vấn đề tôi gặp phải là #main_contentnó không kéo dài để phù hợp với tất cả các div bên trong, với kết quả là chúng tiếp tục đi ngược lại với nền.

Làm thế nào tôi có thể giải quyết vấn đề này khi xem xét kịch bản trên?

css height

— patrick
nguồn

5

Các bạn cảm ơn tất cả các câu trả lời! giải pháp tốt nhất cho trường hợp cụ thể của tôi là mã cứng BR để xóa cả hai mặt (cảm ơn Jennyfofenny và cả Ricebowl) giảm chiều rộng của div đó xuống kích thước của div con). Bây giờ là một người mới, tôi tự hỏi: những giải pháp này có nhược điểm hay tôi có thể sử dụng chúng một cách thờ ơ? (ví dụ: có thể một trong số chúng không hoạt động với IE6 hoặc tương tự ...)

— patrick

1

@Patrick, nếu bạn muốn phát triển thêm câu hỏi của mình, hãy nhấp vào liên kết 'chỉnh sửa' (bên dưới văn bản hiện tại của câu hỏi) và thêm vào các câu hỏi tiếp theo. Công ước đề nghị sử dụng một cái gì đó như <strong>Edited</strong>$Reason_for_revising_question...Bạn có thể cần thay đổi tiêu đề câu hỏi để phản ánh các thay đổi nếu có sự thay đổi hoặc bổ sung chính trong trọng tâm của nó. =)

— David nói phục hồi Monica

4

Bạn cũng không bao giờ đóng divthẻ với id='container'. Điều đó có thể gây ra một số vấn đề.

— Batkins

@patrick, bạn cũng không có CSS cho .clearlớp. Bạn đã quên nó, hoặc nó là trong mã ban đầu của bạn? Các .clearlớp trên đó brlà rất quan trọng như @jennyfofenny đề cập trong câu trả lời của họ.

— Tự sát

280

Bạn cần buộc a clear:bothtrước khi #main_contentdiv được đóng. Tôi có thể sẽ chuyển <br class="clear" />;sang #main_contentdiv và đặt CSS thành:

.clear { clear: both; }

Cập nhật: Câu hỏi này vẫn nhận được một lượng lưu lượng truy cập khá lớn, vì vậy tôi muốn cập nhật câu trả lời bằng một phương án hiện đại sử dụng chế độ bố cục mới trong CSS3 có tên là Hộp linh hoạt hoặc Hộp linh hoạt :

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

Mở rộng đoạn trích

Hầu hết các trình duyệt hiện đại hiện hỗ trợ các đơn vị Flexbox và viewport , nhưng nếu bạn phải duy trì hỗ trợ cho các trình duyệt cũ hơn, hãy đảm bảo kiểm tra tính tương thích cho phiên bản trình duyệt cụ thể.

— jennyfofenny
nguồn

4

Đây là bài viết của w3schools về thuộc tính xóa CSS. Về cơ bản, rõ ràng có nghĩa là phần tử rõ ràng được áp dụng để bắt đầu bên dưới các phao trong dòng chảy của nó (chỉ bên trái, chỉ bên phải hoặc cả hai).

— jennyfofenny

230

Thử cái này: overflow: auto;

Nó đã làm việc cho vấn đề của tôi ..

— sipőcz péter
nguồn

10

+1, Giải pháp này thanh lịch và không thêm thẻ vô hình vào trang của bạn. Xem câu đố này: jsfiddle.net/XmKrm/1

— Nabil Kadimi

5

tự động tràn làm việc tốt cho tôi. FYI này sẽ thêm một thanh cuộn nếu chiều cao của thùng chứa tự động tràn nhỏ hơn nội dung bên trong. Kích thước của nó quá hoặc đặt chiều cao: tự động cùng với tràn.

— Bryan Myers

@ Roozbeh15 thêm display: block;với nó

— BadAtPHP

2

Giải pháp tốt nhất và dễ dàng nhất ... Bạn đã cứu ngày của tôi. Cảm ơn

— Kashyap Kotak

thánh shet này làm việc tuyệt vời. bất cứ ai quan tâm để giải thích các cơ chế bên dưới tại sao điều này làm việc?

— Merkurial

86

thêm những điều sau:

overflow:hidden;
height:1%;

để div chính của bạn. Loại bỏ sự cần thiết cho thêm <br />cho rõ ràng.

— Nick
nguồn

ồ điều đó hoàn toàn ngược lại với những gì tôi mong đợi! tràn: hidden = mở rộng để phù hợp với nội dung! tôi sẽ không bao giờ đoán được điều đó!

— mulllhausen

Vâng, điều này cũng làm việc cho tôi và nó không hoàn toàn có ý nghĩa tại sao. Bất kỳ lời giải thích tại sao 'chiều cao 1%' và 'ẩn tràn' hoạt động?

— acarlon

1

Thực sự nó hoạt động như thế nào và thậm chí tại sao nó hoạt động, nếu không đặt chiều cao, tại sao ẩn tràn không chỉ che giấu mọi thứ (cos height là 0) mà mở rộng chính nó, có lời giải thích nào hay chỉ tin và hạnh phúc?

— Max Yari

1

tràn: ẩn ẩn các thanh cuộn nhưng vẫn giữ kích thước của khối

— xác thực

làm việc cho tôi chỉ với 'overflow: hidden' nhưng 'overflow: auto' cũng hoạt động và không hiển thị thanh cuộn.

— Whirlwind991

60

như một cách khác, bạn cũng có thể thử điều này có thể hữu ích trong một số tình huống

display:table;

jsFiddle

— h0mayun
nguồn

24

Tôi sẽ chỉ sử dụng

height: auto;

trong div của bạn. Vâng, tôi biết tôi đến hơi muộn nhưng tôi nghĩ rằng điều này có thể giúp ai đó như nó sẽ giúp tôi nếu nó ở đây.

— Charles
nguồn

height: auto;làm cho tất cả các mục bên dưới để di chuyển lên đầu. Với thuộc tính này trên div nội dung chính của tôi, chân trang của trang của tôi di chuyển lên trên để nó chạm vào tiêu đề và chồng lên div nội dung của tôi.

— Aaron Franke

1

Đây là giải pháp cho tôi. Cảm ơn!

— Nik Hammer-Ellis

14

Sau đây nên làm việc:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

— Chỉ đạo
nguồn

thêm tràn: tự động hoạt động, mặc dù nếu tôi thêm chiều rộng: 100%, điều đó khiến div (#main_content) lớn hơn một chút so với div cha. Không hiểu tại sao!

— patrick

2

đó là bởi vì phần đệm được tính thêm vào chiều rộng được chỉ định, vì vậy chiều rộng của phần tử của bạn là phần đệm bên trái 100% + 5px + phần đệm bên phải 5px

— NickV

1

tràn: tự động; làm việc cho tôi, cảm ơn bạn veddy nhiều.

— Cosco Tech

9

Cách rất đơn giản

Trên cha mẹ DIV:

height: 100%;

Công việc này cho tôi mọi lúc

— Daniel Beltrami
nguồn

8

Sử dụng thẻ span với display:inline-blockcss gắn liền với nó. Sau đó, bạn có thể sử dụng CSS và thao tác nó như một div theo nhiều cách nhưng nếu bạn không bao gồm một widthhoặc heightnó sẽ mở rộng và rút lại dựa trên nội dung của nó.

Mong rằng sẽ giúp.

— marc tối
nguồn

Hy vọng của bạn đã làm việc: nó ít nhất đã giúp tôi! :) Btw, tôi đã để phần tử của mình là một div(thay vì a span) nhưng display: inline-blockvẫn hoạt động trong trường hợp của tôi (Chromium).

— snapfractalpop

6

Thông thường tôi nghĩ rằng điều này có thể được giải quyết bằng cách buộc một clear:bothquy tắc về yếu tố con cuối cùng của #items_list.

Bạn có thể sử dụng:

#items_list:last-child {clear: both;}

Hoặc, nếu bạn đang sử dụng ngôn ngữ động, hãy thêm một lớp bổ sung vào phần tử cuối cùng được tạo trong bất kỳ vòng lặp nào sẽ tự tạo danh sách, để bạn kết thúc với một cái gì đó trong html của mình như:

<div id="list_item_20" class="last_list_item">

và css

.last_list_item {clear: both; }

— David nói phục hồi Monica
nguồn

6

Vấn đề này phát sinh khi các yếu 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

— Ifti Mahmud
nguồn

5

thêm một thuộc tính float vào #main_contentdiv - sau đó nó sẽ mở rộng để chứa nội dung nổi của nó

— cá đuối
nguồn

Cảm ơn Ray, điều này đã hoạt động mặc dù nó thu nhỏ div theo kích thước của nội dung của nó (#items_list) có chiều rộng: 400px; Giải pháp của bạn sẽ thực sự tốt nếu tôi có thể khiến #main_content giữ nguyên chiều rộng của nó - có đề xuất nào không?

— patrick

@Ray 2 và một năm sau đó và điều này chỉ giúp tôi đỡ đau đầu với một vấn đề tương tự. Cảm ơn bạn!

— John H

4

Trước khi làm bất cứ điều gì kiểm tra các quy tắc css với:

{ position:absolute }

Xóa nếu tồn tại và không cần chúng.

— onalbi
nguồn

2

Bởi vì "các phần tử được định vị tuyệt đối được xóa khỏi luồng, do đó bị bỏ qua bởi các phần tử khác. Vì vậy, bạn không thể đặt chiều cao của cha mẹ theo một phần tử được định vị tuyệt đối." stackoverflow.com/questions/12070759/ Mạnh

— Federico

4

Các phần tử nổi không chiếm không gian bên trong phần tử cha, Như tên cho thấy chúng nổi! Do đó, nếu chiều cao không được cung cấp rõ ràng cho một phần tử có các phần tử con của nó nổi, thì phần tử cha sẽ xuất hiện co lại và dường như không chấp nhận kích thước của phần tử con, cũng như nếu phần tử con của overflow:hidden;nó có thể không xuất hiện trên màn hình. Có nhiều cách để giải quyết vấn đề này:

Chèn một yếu tố dưới đây là yếu tố nổi với clear:both;tài sản, hoặc sử dụng clear:both;vào :aftercủa phần tử nổi.
Sử dụng display:inline-block;hoặc flex-boxthay vì float.

— Apoorv Srivastava
nguồn

3

Hình như cái này hoạt động

html {
 width:100%;
 height:auto;
 min-height:100%
}

Nó lấy kích thước màn hình ở mức tối thiểu và nếu nội dung mở rộng thì nó sẽ phát triển.

— ChấtMX
nguồn

2

Trong CSS: #clear_div{clear:both;}

Sau thẻ div của div bên trong, thêm div mới sau đây

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_group_clear.asp : để biết thêm thông tin

— ăn sâu
nguồn

2

Tôi đã thêm Bootstrap vào một dự án với sectioncác thẻ mà tôi đã đặt thành 100% chiều cao màn hình. Nó hoạt động tốt cho đến khi tôi thực hiện dự án đáp ứng, tại thời điểm đó tôi đã mượn một phần câu trả lời của jennyfofenny để nền của phần của tôi khớp với nền của nội dung khi kích thước màn hình thay đổi trên màn hình nhỏ hơn.

sectionCSS mới của tôi trông như thế này:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

Giả sử bạn có một phần có màu nhất định. Bằng cách sử dụng min-height, nếu chiều rộng của phần bị thu hẹp vì màn hình nhỏ hơn, chiều cao của phần sẽ mở rộng, nội dung sẽ nằm trong phần đó và nền của bạn sẽ giữ nguyên màu mong muốn.

— Adrian
nguồn

2

Bạn đã thử cách truyền thống? cho chiều cao container chính: tự động

#container{height:auto}

Tôi đã sử dụng nó và nó đã làm việc hầu hết thời gian với tôi.

— Michelle Dimwaite
nguồn

1

Tôi đang tự mình thực hiện dự án này - tôi có một cái bàn bên trong một div đang tràn ra khỏi đáy của div. Không có sửa chữa chiều cao nào tôi đã thử làm việc, nhưng tôi đã tìm thấy một sửa chữa kỳ lạ cho nó, và đó là đặt một đoạn văn ở dưới cùng của div chỉ với một khoảng thời gian trong đó. Sau đó, định kiểu "màu" của văn bản giống với nền của thùng chứa. Làm việc gọn gàng như bạn muốn và không yêu cầu javascript. Một không gian không phá vỡ sẽ không hoạt động - cũng không phải là một hình ảnh trong suốt.

Rõ ràng chỉ cần thấy rằng có một số nội dung bên dưới bảng để kéo dài để chứa nó. Tôi tự hỏi nếu điều này sẽ làm việc cho bất cứ ai khác.

Đây là loại điều khiến các nhà thiết kế sử dụng các bố cục dựa trên bảng - lượng thời gian tôi đã bỏ ra để tìm ra thứ này và làm cho nó tương thích với nhiều trình duyệt đang khiến tôi phát điên.

— Nancy Hastings-Trew
nguồn

Phải có một số cách để làm điều này với css, nhưng tôi không biết đó là gì. Điều này làm việc cho tôi, nhưng tôi phải thêm chiều rộng: 100%; chiều cao: tự động; chiều cao tối thiểu: 100%; vị trí: tương đối;

— RationalRmus

1

Tôi đã thử nó và nó hoạt động

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

— Ahmed Aboelela
nguồn

0

Nếu bạn đang sử dụng Giao diện người dùng jQuery, họ đã có một lớp hoạt động chỉ là một bùa chú thêm <div>ở dưới cùng bên trong div mà bạn muốn mở rộng, height:auto; sau đó thêm một tên lớp ui-helper-Clearfix hoặc sử dụng thuộc tính style này và thêm vào như bên dưới :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

thêm lớp UI UI vào div rõ ràng, không phải div mà bạn muốn mở rộng.

— Lucas M. Oliveira
nguồn

0

Tôi biết đây là loại chủ đề cũ, tuy nhiên, điều này có thể đạt được với min-heightthuộc tính CSS một cách rõ ràng, vì vậy tôi sẽ để nó ở đây để tham khảo trong tương lai:

Tôi đã tạo một câu đố dựa trên mã được đăng ở OP tại đây: http://jsfiddle.net/U5x4T/1/ , khi bạn xóa và thêm div bên trong, bạn sẽ nhận thấy cách container mở rộng hoặc giảm kích thước

Hai điều duy nhất bạn cần để đạt được điều này, bổ sung cho mã OP là:

* Tràn trong thùng chứa chính (cần thiết cho các div nổi)

* thuộc tính css chiều cao tối thiểu, thông tin thêm có sẵn tại đây: http://www.w3schools.com/cssref/pr_dim_min-height.asp

— Juan Carlos Alpizar Chinchilla
nguồn

0

Đã thêm hiển thị: nội tuyến vào div và nó tự động phát triển (không phải nội dung cuộn) khi nội dung chiều cao lớn hơn thì chiều cao div được đặt là 200px

— Jelle
nguồn

1

Đây không phải là một câu trả lời rõ ràng cho câu hỏi. Để nhận xét, xin vui lòng sử dụng chức năng bình luận.

— ksbg

0

Bạn có thể sử dụng CSS Grid Layout . Hỗ trợ khá rộng tại thời điểm này: kiểm tra nó trên caniuse .

Dưới đây là ví dụ trên jsfiddle. Cũng ví dụ với hàng tấn công cụ văn bản.

Mã HTML:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

Mã CSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

— Sharikov Vladislav
nguồn

0

Tôi đã thử khá nhiều đề xuất được liệt kê ở trên và không ai trong số họ làm việc. Tuy nhiên, "display: table" đã giúp tôi rất nhiều.

— Pông
nguồn

-1

Không cần sử dụng nhiều CSS, chỉ cần sử dụng bootstrap, sau đó sử dụng:

class="container"

cho div cần được điền.

Bạn có thể lấy bootstrap từ đây

— Thadeo Arlo
nguồn