ทำให้ div สูงขึ้นพร้อมเนื้อหา

376

ฉันมี div ที่ซ้อนกันเหล่านี้และฉันต้องการคอนเทนเนอร์หลักเพื่อขยาย (สูง) เพื่อรองรับ DIVs ภายใน

    <!-- 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 คือ:

* {
    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;
}

ปัญหาที่ฉันมีคือมัน#main_contentไม่ได้ยืดออกเพื่อรองรับ divs ด้านในทั้งหมดด้วยผลลัพธ์ที่พวกเขาทำกับพื้นหลัง

ฉันจะแก้ปัญหานี้โดยพิจารณาสถานการณ์ข้างต้นได้อย่างไร

css height

— แพทริก
แหล่งที่มา

5

ขอขอบคุณทุกคนสำหรับคำตอบ! ทางออกที่ดีที่สุดสำหรับกรณีเฉพาะของฉันคือการเขียนโค้ด BR เพื่อล้างทั้งสองด้าน (ขอบคุณ Jennyfofenny และ Ricebowl) อย่างไรก็ตามวิธีการแก้ปัญหาอื่น ๆ ก็ใช้ได้เช่นกันการใส่มากเกินไป: อัตโนมัติตกลงและลอย #main_content ก็ยังใช้ได้ ลดความกว้างของ div นั้นเป็นขนาดของ div ลูก) ตอนนี้เป็นมือใหม่ที่ฉันสงสัยว่า: วิธีแก้ปัญหาเหล่านี้มีข้อบกพร่องหรือไม่หรือฉันสามารถใช้มันได้อย่างเฉยเมย? (. เช่นอาจจะเป็นหนึ่งของพวกเขาไม่ได้ทำงานกับ IE6 หรือคล้ายกัน ... )

— แพทริค

1

@Patrick หากคุณต้องการพัฒนาคำถามของคุณเพิ่มเติมให้คลิกลิงก์ 'แก้ไข' (ใต้ข้อความปัจจุบันของคำถาม) และเพิ่มในคำถามเพิ่มเติม การประชุมแนะนำให้ใช้บางอย่างเช่น<strong>Edited</strong>$Reason_for_revising_question...คุณอาจจำเป็นต้องเปลี่ยนชื่อคำถามเพื่อแสดงถึงการเปลี่ยนแปลงหากมีการเปลี่ยนแปลงครั้งสำคัญหรือมีการเน้นเพิ่มเติม =)

— David บอกว่าคืนสถานะโมนิก้า

4

นอกจากนี้คุณยังไม่เคยปิดแท็กdiv id='container'ที่อาจทำให้เกิดปัญหาบางอย่าง

— Batkins

@patrick คุณยังไม่มี CSS สำหรับ.clearคลาส คุณลืมมันหรือมันเป็นรหัสต้นฉบับของคุณ? .clearชั้นบนที่brเป็นสิ่งสำคัญมาก @jennyfofenny กล่าวถึงในคำตอบของพวกเขา

— Cannicide

280

คุณต้องบังคับclear:bothก่อนที่#main_contentdiv จะถูกปิด ฉันอาจจะย้าย<br class="clear" />;เข้าไปใน#main_contentdiv และตั้ง CSS เป็น:

.clear { clear: both; }

อัปเดต:คำถามนี้ยังคงได้รับปริมาณการใช้ข้อมูลที่ยุติธรรมดังนั้นฉันต้องการอัปเดตคำตอบด้วยทางเลือกที่ทันสมัยโดยใช้โหมดเลย์เอาต์ใหม่ใน CSS3 ที่เรียกว่ากล่องแบบยืดหยุ่นหรือ Flexbox :

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>

ขยายตัวอย่างข้อมูล

เบราว์เซอร์ที่ทันสมัยส่วนใหญ่ในปัจจุบันรองรับหน่วย Flexboxและวิวพอร์ตแต่ถ้าคุณต้องรักษาการรองรับเบราว์เซอร์รุ่นเก่าให้ตรวจสอบความเข้ากันได้สำหรับเวอร์ชันเบราว์เซอร์ที่เฉพาะเจาะจง

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

4

นี่คือบทความ w3schools เกี่ยวกับ CSS คุณสมบัติที่ชัดเจน โดยพื้นฐานแล้ว clear หมายถึงองค์ประกอบที่ clear ถูกนำไปใช้ในการเริ่มต้นใต้การลอยตัวใน flow

— jennyfofenny

230

ลองสิ่งนี้: overflow: auto;

มันใช้งานได้สำหรับปัญหาของฉัน ..

— sip pcz péter
แหล่งที่มา

10

+1, โซลูชันนี้สวยงามและไม่เพิ่มแท็กที่มองไม่เห็นในหน้าเว็บของคุณ ดูซอนี้: jsfiddle.net/XmKrm/1

— นาบิลคาดิมิ

5

ออโต้โอเวอร์โฟลทำงานได้ดีสำหรับฉัน FYI สิ่งนี้จะเพิ่มแถบเลื่อนหากความสูงของคอนเทนเนอร์อัตโนมัติล้นมีค่าน้อยกว่าเนื้อหาภายใน ปรับขนาดด้วยหรือตั้งค่าความสูง: อัตโนมัติพร้อมกับการล้น

— ไบรอันไมเออร์ส

@ Roozbeh15 เพิ่มdisplay: block;ด้วย

— BadAtPHP

2

ทางออกที่ดีที่สุดและง่ายที่สุด ... คุณบันทึกวันของฉันไว้ ขอบคุณ

— Kashyap Kotak

ศักดิ์สิทธิ์ shet นี้ทำงานได้อย่างมหัศจรรย์ ใครสนใจที่จะอธิบายกลไกด้านล่างว่าทำไมจึงเป็นไปได้

— Merkurial

86

เพิ่มต่อไปนี้:

overflow:hidden;
height:1%;

ถึง div หลักของคุณ ลดความจำเป็นในการเพิ่ม<br />ความคมชัด

— กรงขัง
แหล่งที่มา

ว้าว! ตรงข้ามกับที่ฉันคาดไว้! ล้น: ซ่อน = ขยายเพื่อให้พอดีกับเนื้อหา! ฉันจะไม่เดาเลย!

— mulllhausen

ใช่มันใช้ได้กับฉันด้วยและมันก็ไม่สมเหตุสมผลเลย คำอธิบายใด ๆ ทำไม 'ความสูง 1%' และ 'ซ่อนล้น' ทำงาน

— acarlon

1

จริงๆแล้วมันทำงานยังไงและทำไมถึงใช้งานได้ถ้าไม่มีการตั้งค่าความสูงทำไมการซ่อนเร้นไม่เพียงซ่อนทุกอย่าง (เพราะความสูงคือ 0) แต่ขยายตัวเองมีคำอธิบายใด ๆ หรือเพียงแค่เชื่อและมีความสุข?

— Max Yari

1

ล้น: ซ่อนซ่อนแถบเลื่อน แต่เก็บขนาดของบล็อก

— authenticictech

ทำงานได้สำหรับฉันด้วย 'ล้น: ซ่อน' แต่ 'ล้น: อัตโนมัติ' ก็ใช้ได้และไม่แสดงแถบเลื่อน

— Whirlwind991

60

เป็นอีกทางเลือกหนึ่งที่คุณสามารถลองสิ่งนี้ซึ่งอาจมีประโยชน์ในบางสถานการณ์

display:table;

jsFiddle

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

24

ฉันจะใช้

height: auto;

ใน div ของคุณ ใช่ฉันรู้ว่าฉันสายไปนิดหน่อย แต่ฉันคิดว่านี่อาจช่วยคนอย่างที่มันช่วยฉันถ้าอยู่ที่นี่

— ชาร์ลส์
แหล่งที่มา

height: auto;ทำให้รายการทั้งหมดด้านล่างย้ายไปด้านบน ด้วยคุณสมบัตินี้ใน div เนื้อหาหลักส่วนท้ายของหน้าของฉันเลื่อนขึ้นเพื่อให้แตะที่ส่วนหัวและทับซ้อน div เนื้อหาของฉัน

— Aaron Franke

1

นี่คือทางออกสำหรับฉัน ขอบคุณ!

— Nik Hammer-Ellis

14

ขอบคุณต่อไปนี้ควรทำงาน:

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

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

การเพิ่มโอเวอร์โฟลว์: การทำงานอัตโนมัติแม้ว่าฉันจะเพิ่มความกว้างด้วย: 100% นั่นทำให้ div (#main_content) ใหญ่กว่าการปกครอง div เล็กน้อย ไม่เข้าใจว่าทำไม!

— patrick

2

นั่นเป็นเพราะการ

— แพ็ดดิ้ง

1

ล้น: อัตโนมัติ; ทำงานให้ฉันขอบคุณ veddy มาก

— Cosco Tech

9

วิธีที่ง่ายมาก

บนพาเรนต์ DIV:

height: 100%;

งานนี้สำหรับฉันทุกครั้ง

— Daniel Beltrami
แหล่งที่มา

8

ใช้แท็ก span พร้อมdisplay:inline-blockcss ที่แนบมา จากนั้นคุณสามารถใช้ CSS และจัดการมันให้เหมือน div ในหลาย ๆ วิธี แต่ถ้าคุณไม่ได้ใส่widthหรือheightจะขยายหรือหดตามเนื้อหา

หวังว่าจะช่วย

— มาร์คมืด
แหล่งที่มา

ความหวังของคุณได้ผล: อย่างน้อยก็ช่วยฉันได้! :) Btw ฉันปล่อยให้องค์ประกอบของฉันเป็นdiv(แทนที่จะเป็นspan) แต่display: inline-blockก็ยังใช้งานได้ในกรณีของฉัน (Chromium)

— snapfractalpop

6

โดยปกติแล้วฉันคิดว่านี้สามารถแก้ไขได้โดยการบังคับให้กฎในเด็กองค์ประกอบสุดท้ายของclear:both#items_list

คุณสามารถใช้:

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

หรือถ้าคุณใช้ภาษาแบบไดนามิกให้เพิ่มคลาสเพิ่มเติมในองค์ประกอบสุดท้ายที่สร้างขึ้นในลูปใดก็ตามที่สร้างรายการเองดังนั้นคุณจะต้องจบลงด้วยบางสิ่งบางอย่างใน html ของคุณเช่น:

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

และ css

.last_list_item {clear: both; }

— เดวิดพูดว่าคืนสถานะโมนิก้า
แหล่งที่มา

6

ปัญหานี้เกิดขึ้นเมื่อองค์ประกอบลูกของผู้ปกครองถูกลอย นี่คือทางออกล่าสุดของปัญหา:

ในไฟล์ CSS ของคุณเขียนคลาสต่อไปนี้ชื่อ. cleanarfixพร้อมกับตัวเลือกหลอก: after

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

จากนั้นใน HTML ของคุณเพิ่มคลาส. cleanarfixให้กับ Div parent ของคุณ ตัวอย่างเช่น:

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

มันควรจะทำงานเสมอ คุณสามารถเรียกชื่อคลาสเป็น. groupแทน. cleanarfixเนื่องจากจะทำให้โค้ดมีความหมายมากขึ้น โปรดทราบว่าไม่จำเป็นต้องเพิ่มจุดหรือแม้แต่ช่องว่างในค่าของเนื้อหาระหว่างอัญประกาศ "" นอกจากนี้น้ำล้น: อัตโนมัติ;อาจแก้ปัญหาได้ แต่ทำให้เกิดปัญหาอื่น ๆ เช่นการแสดงแถบเลื่อนและไม่แนะนำ

ที่มา: บล็อกของ Lisa Catalano และ Chris Coyier

— Ifti Mahmud
แหล่งที่มา

5

เพิ่มคุณสมบัติลอยเพื่อ#main_contentdiv - มันจะขยายเพื่อให้มีเนื้อหาลอย

— รังสี
แหล่งที่มา

ขอบคุณ Ray สิ่งนี้ได้ผลแม้ว่ามันจะย่อขนาดของเนื้อหา (#items_list) ที่มีความกว้าง: 400px; ทางออกของคุณจะดีมากถ้าฉันสามารถทำให้ #main_content คงความกว้างได้ - คำแนะนำใด ๆ

— แพทริค

@ เรย์ 2 และอีกไม่กี่ปีต่อมาและนี่ก็ช่วยฉันปวดหัวที่อาจเกิดขึ้นกับปัญหาที่คล้ายกัน ขอบคุณ!

— John H

4

ก่อนที่จะทำอะไรตรวจสอบกฎ css ด้วย:

{ position:absolute }

ลบหากมีอยู่และไม่ต้องการ

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

2

เนื่องจาก "องค์ประกอบตำแหน่งที่แน่นอนถูกลบออกจากโฟลว์ดังนั้นองค์ประกอบอื่น ๆ จึงถูกละเว้นดังนั้นคุณจึงไม่สามารถตั้งค่าความสูงของผู้ปกครองตามองค์ประกอบตำแหน่งที่แน่นอน" stackoverflow.com/questions/12070759/…

— Federico

4

องค์ประกอบที่ลอยอยู่นั้นไม่ได้ครอบครองพื้นที่ภายในขององค์ประกอบหลักตามชื่อที่แสดงว่าพวกมันลอย! ดังนั้นหากความสูงไม่ได้ถูกระบุอย่างชัดเจนให้กับองค์ประกอบที่มีองค์ประกอบย่อยของมันลอยองค์ประกอบหลักจะปรากฏขึ้นเพื่อลดขนาดและดูเหมือนจะไม่ยอมรับขนาดขององค์ประกอบย่อยเช่นกันหากได้รับoverflow:hidden;ลูกอาจไม่ปรากฏบนหน้าจอ มีหลายวิธีในการจัดการกับปัญหานี้:

แทรกองค์ประกอบอื่นใต้องค์ประกอบลอยพร้อมclear:both;คุณสมบัติหรือใช้clear:both;กับ:afterองค์ประกอบลอย
ใช้display:inline-block;หรือแทนflex-boxfloat

— Apoorv Srivastava
แหล่งที่มา

3

ดูเหมือนว่างานนี้

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

มันใช้ขนาดหน้าจอเป็นขั้นต่ำและถ้าเนื้อหาขยายมันจะเติบโต

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

2

ใน CSS: #clear_div{clear:both;}

หลังจากแท็ก div ของ div ภายในเพิ่ม div ต่อไปนี้ใหม่

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

http://www.w3schools.com/cssref/pr_class_clear.asp : สำหรับข้อมูลเพิ่มเติม

— อิงกริด
แหล่งที่มา

2

ฉันเพิ่ม Bootstrap ให้กับโปรเจ็sectionกต์ที่มีแท็กที่ฉันตั้งไว้ที่ความสูงของหน้าจอ 100% มันใช้งานได้ดีจนกระทั่งฉันตอบสนองโครงการซึ่งในตอนนั้นฉันยืมส่วนหนึ่งของคำตอบของjennyfofennyเพื่อให้พื้นหลังส่วนของฉันตรงกับพื้นหลังของเนื้อหาเมื่อขนาดหน้าจอเปลี่ยนบนหน้าจอขนาดเล็ก

sectionCSS ใหม่ของฉันมีลักษณะดังนี้:

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;
}

สมมติว่าคุณมีส่วนที่เป็นสี เมื่อใช้min-heightหากความกว้างของส่วนย่อเนื่องจากหน้าจอขนาดเล็กความสูงของส่วนจะขยายขึ้นเนื้อหาจะอยู่ภายในส่วนและพื้นหลังของคุณจะยังคงสีที่ต้องการ

— เอเดรีย
แหล่งที่มา

2

คุณได้ลองวิธีดั้งเดิมแล้วหรือยัง? ให้ความสูงของภาชนะหลัก: อัตโนมัติ

#container{height:auto}

ฉันเคยใช้มันและมันได้ผลกับฉันเป็นส่วนใหญ่

— Michelle Dimwaite
แหล่งที่มา

1

ฉันพบโปรเจ็คต์นี้ด้วยตัวเอง - ฉันมีโต๊ะใน div ที่ทะลักออกมาจากด้านล่างของ div ไม่มีการแก้ไขความสูงที่ฉันพยายามใช้งาน แต่ฉันพบการแก้ไขที่แปลกสำหรับมันและนั่นคือการใส่ย่อหน้าที่ด้านล่างของ div ด้วยระยะเวลาหนึ่งในนั้น จากนั้นกำหนดสไตล์ "สี" ของข้อความให้เหมือนกับพื้นหลังของคอนเทนเนอร์ ทำงานเรียบร้อยตามที่คุณต้องการและไม่จำเป็นต้องใช้จาวาสคริปต์ พื้นที่ที่ไม่ทำลายจะไม่ทำงาน - และไม่มีภาพโปร่งใส

เห็นได้ชัดว่ามันแค่ต้องการเห็นว่ามีเนื้อหาบางส่วนด้านล่างตารางเพื่อยืดให้มี ฉันสงสัยว่าสิ่งนี้จะใช้ได้กับคนอื่นหรือไม่

นี่คือสิ่งที่ทำให้นักออกแบบหันไปใช้เลย์เอาต์บนโต๊ะ - ระยะเวลาที่ฉันใช้หาสิ่งนี้และทำให้การใช้งานข้ามเบราว์เซอร์ทำให้ฉันบ้า

— Nancy Hastings-Trew
แหล่งที่มา

ต้องเป็นวิธีที่จะทำเช่นนี้กับ CSS แต่ฉันไม่รู้ว่ามันจะเป็นอะไร สิ่งนี้ใช้ได้สำหรับฉัน แต่ฉันต้องเพิ่มความกว้าง: 100%; ความสูง: อัตโนมัติ; นาที-height: 100%; ตำแหน่ง: ญาติ;

— RationalRabbit

1

ฉันลองมันแล้วมันใช้งานได้

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

— Ahmed Aboelela
แหล่งที่มา

0

หากคุณใช้ jQuery UI พวกเขามีคลาสที่มีเพียงเสน่ห์เพิ่ม<div>ที่ด้านล่างใน div ที่คุณต้องการขยายheight:auto; แล้วเพิ่มชื่อคลาส ui-helper-clearfix หรือใช้แอตทริบิวต์สไตล์นี้และเพิ่มเช่นเดียวกับด้านล่าง :

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

เพิ่ม jQuery UI class ให้กับ div ที่ชัดเจนไม่ใช่ div ที่คุณต้องการขยาย

— Lucas M. Oliveira
แหล่งที่มา

0

ฉันรู้ว่านี่เป็นเธรดชนิดเก่าอย่างไรก็ตามสิ่งนี้สามารถทำได้ด้วยmin-heightคุณสมบัติ CSS ในวิธีที่สะอาดดังนั้นฉันจะปล่อยไว้ที่นี่เพื่ออ้างอิงในอนาคต:

ฉันทำซอตามรหัสโพสต์ของ OP ที่นี่: http://jsfiddle.net/U5x4T/1/เมื่อคุณลบและเพิ่ม divs ข้างในคุณจะสังเกตได้ว่าคอนเทนเนอร์ขยายหรือลดขนาดอย่างไร

สิ่งเดียวที่คุณต้องมีเพื่อให้ได้สิ่งนี้เพิ่มเติมจากรหัส OP คือ:

* ล้นในภาชนะหลัก (จำเป็นสำหรับ divs ลอย)

* คุณสมบัติความสูงขั้นต่ำ css สามารถดูข้อมูลเพิ่มเติมได้ที่นี่: http://www.w3schools.com/cssref/pr_dim_min-height.asp

— Juan Carlos Alpizar Chinchilla
แหล่งที่มา

0

เพิ่มจอแสดงผล: อินไลน์ไปยัง div และขยายอัตโนมัติ (ไม่ใช่สิ่งเลื่อน) เมื่อเนื้อหาความสูงมีขนาดใหญ่ขึ้นจากนั้นความสูง div ที่ตั้งไว้ที่ 200px

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

1

นี่ไม่ใช่คำตอบที่ชัดเจนสำหรับคำถาม สำหรับข้อสังเกตโปรดใช้ฟังก์ชั่นความคิดเห็น

— ksbg

0

คุณสามารถใช้CSS ตารางเค้าโครง สนับสนุนค่อนข้างกว้างในขณะนี้: ตรวจสอบในcaniuse

นี่คือตัวอย่างใน jsfiddle นอกจากนี้ยังมีตัวอย่างของเนื้อหาข้อความมากมาย

รหัส HTML:

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

รหัส 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
แหล่งที่มา

0

ฉันลองใช้ทุกข้อเสนอแนะที่กล่าวไว้ข้างต้นและไม่มีข้อเสนอใดเลย อย่างไรก็ตาม "display: table" ได้หลอกลวงสำหรับฉัน

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

-1

ไม่จำเป็นต้องใช้ CSS จำนวนมากเพียงใช้ bootstrap แล้วใช้:

class="container"

สำหรับ div ที่จำเป็นต้องกรอก

คุณสามารถรับ bootstrap ได้จากที่นี่

— Thadeo Arlo
แหล่งที่มา