Div ความสูง 100% และขยายเพื่อให้พอดีกับเนื้อหา

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

นี่เป็น CSS ที่เรียบง่ายของฉัน:

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

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

เมื่อฉันเลื่อนหน้าความมืดจะสิ้นสุดลงและเนื้อหาจะไหลลงบนพื้นหลังสีแดง ดูเหมือนว่าไม่สำคัญว่าฉันจะตั้งค่า positon ให้สัมพันธ์หรือสัมบูรณ์บน #some_div ปัญหาจะเกิดขึ้นด้วยวิธีใดก็ตาม เนื้อหาภายใน #some_div ส่วนใหญ่อยู่ในตำแหน่งที่แน่นอนและสร้างขึ้นแบบไดนามิกจากฐานข้อมูลเพื่อไม่ให้ทราบความสูงล่วงหน้า

แก้ไข: นี่คือภาพหน้าจอของปัญหา:

นี่คือสิ่งที่คุณควรทำในสไตล์ CSS บนหลัก div

display: block;
overflow: auto;

และห้ามสัมผัส height

ตั้งค่าheightการautoและการmin-height 100%นี่ควรจะแก้ปัญหาได้สำหรับเบราว์เซอร์ส่วนใหญ่

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

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

ในไฟล์ 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

หากคุณเพียงแค่ออกheight: 100%และใช้จะใช้เป็นพื้นที่มากที่สุดเท่าที่เนื้อหาภายใน วิธีนี้ข้อความทั้งหมดจะอยู่ในพื้นหลังสีดำdisplay:block;divdiv

คำถามนี้อาจเก่า แต่สมควรได้รับการอัปเดต นี่เป็นอีกวิธีในการทำเช่นนั้น:

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

ลองสิ่งนี้:

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

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

IE6 และรุ่นก่อนหน้านี้ไม่สนับสนุนคุณสมบัติความสูงขั้นต่ำ

ฉันคิดว่าปัญหาคือเมื่อคุณบอกว่าร่างกายมีความสูง 100% พื้นหลังของมันจะสูงได้เท่ากับความสูงของเบราว์เซอร์ "วิวพอร์ต" หนึ่งเดียว (พื้นที่ดูที่ไม่รวมแถบเครื่องมือ & สถานะแถบเมนู & แถบเมนู ขอบหน้าต่าง) หากเนื้อหาสูงกว่าหนึ่งวิวพอร์ตมันจะล้นความสูงที่อุทิศให้กับพื้นหลัง

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

คำถามเก่า แต่ในกรณีของฉันฉันพบว่าใช้position:fixedแก้ไขให้ฉันได้ สถานการณ์ของฉันอาจแตกต่างไปเล็กน้อย ฉันมีกึ่งโปร่งใสที่ซ้อนทับdivพร้อมภาพเคลื่อนไหวในการโหลดที่ฉันต้องการแสดงในขณะที่กำลังโหลดหน้าเว็บ ดังนั้นการใช้height:auto / 100%หรือmin-height: 100%ทั้งสองเต็มหน้าต่าง แต่ไม่ใช่พื้นที่ปิดหน้าจอ การใช้การposition:fixedเลื่อนภาพซ้อนทับนี้กับผู้ใช้จึงครอบคลุมพื้นที่ที่มองเห็นได้เสมอและทำให้แอนิเมชั่นการโหลดล่วงหน้าของฉันอยู่ตรงกลางหน้าจอ

เพียงเพิ่มสองบรรทัดนี้ใน css id #some_div ของคุณ

display: block;
overflow: auto;

หลังจากนั้นคุณจะได้สิ่งที่คุณกำลังมองหา!

ฉันไม่แน่ใจทั้งหมดว่าฉันเข้าใจคำถามเพราะนี่เป็นคำตอบที่ตรงไปตรงมา แต่นี่ไป ... :)

คุณลองตั้งค่าคุณสมบัติโอเวอร์โฟลว์ของคอนเทนเนอร์ให้มองเห็นหรืออัตโนมัติหรือไม่?

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

การเพิ่มที่ควรผลักดันภาชนะสีดำให้มีขนาดใดก็ได้ที่ภาชนะไดนามิกของคุณต้องการ ฉันชอบที่จะเห็นอัตโนมัติเพราะอัตโนมัติดูเหมือนว่าจะมาพร้อมกับแถบเลื่อน ...

เบราว์เซอร์สมัยใหม่รองรับหน่วย "viewport height" สิ่งนี้จะขยาย div เป็นความสูงวิวพอร์ตที่มี ฉันคิดว่ามันน่าเชื่อถือกว่าวิธีอื่น ๆ

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

แม้คุณสามารถทำสิ่งนี้ได้

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

ซึ่งจะรวม Div div แบบไดนามิกของคุณตามเนื้อหา สมมติว่าคุณมี div ทั่วไปในคลาสมันจะเพิ่มความสูงของไดนามิก div แต่ละอันตามเนื้อหา

คุณยังสามารถใช้

 display: inline-block;

ฉันทำงานกับสิ่งนี้

OVERLAY โดยไม่มีตำแหน่ง: คงที่

วิธีเจ๋งจริง ๆ ที่ฉันคิดออกนี้สำหรับเมนูล่าสุดคือการตั้งค่าร่างกาย:

position: relative

และตั้งค่าคลาส wrapper ของคุณดังนี้:

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

ซึ่งหมายความว่าคุณไม่จำเป็นต้องกำหนดตำแหน่งให้คงที่และยังสามารถอนุญาตให้เลื่อนได้ ฉันใช้สิ่งนี้เพื่อวางซ้อนเมนูที่ใหญ่จริงๆ

ใช้ดิ้น

.parent{
    display: flex
}

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

ตกลงฉันลองทำสิ่งนี้:

ร่างกาย (ปกติ)

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

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