CSS - ขยายความสูงลูก DIV ความสูงเป็นความสูงของผู้ปกครอง

ฉันมีโครงสร้างหน้าเป็น:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

ตอนนี้child-leftDIV จะมีเนื้อหามากขึ้นดังนั้นparentความสูงของ DIV จะเพิ่มขึ้นตาม DIV ลูก

แต่ปัญหาคือchild-rightความสูงไม่เพิ่มขึ้น ฉันจะทำให้ความสูงเท่ากับพ่อแม่ได้อย่างไร

สำหรับparentองค์ประกอบเพิ่มคุณสมบัติต่อไปนี้:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

สำหรับ.child-rightสิ่งเหล่านี้แล้ว:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

พบผลการค้นหารายละเอียดเพิ่มเติมกับตัวอย่าง CSS ที่นี่และข้อมูลเพิ่มเติมเกี่ยวกับคอลัมน์ความสูงเท่ากันที่นี่

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

1. display: flex: โดยวิธีที่ง่ายที่สุด & ดีที่สุดและยืดหยุ่นมาก - แต่ไม่รองรับโดย IE9 และรุ่นเก่ากว่า
2. tableหรือdisplay: table: ง่ายมากเข้ากันได้ดี (เบราว์เซอร์ทุกอันที่เคยมี) ค่อนข้างยืดหยุ่น
3. display: inline-block; width:50% ด้วยการแฮ็กขอบติดลบค่อนข้างง่าย แต่เส้นขอบคอลัมน์ด้านล่างนั้นค่อนข้างยุ่งยาก

1 display:flex

นี่เป็นเรื่องง่ายมากและง่ายต่อการปรับให้เข้ากับรูปแบบที่ซับซ้อนมากขึ้นหรือรายละเอียดที่มากขึ้น - แต่ flexbox รองรับเฉพาะ IE10 หรือใหม่กว่าเท่านั้น (นอกเหนือจากเบราว์เซอร์สมัยใหม่อื่น ๆ )

ตัวอย่าง: http://output.jsbin.com/hetunujuma/1

html ที่เกี่ยวข้อง:

<div class="parent"><div>column 1</div><div>column 2</div></div>

css ที่เกี่ยวข้อง:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox มีการสนับสนุนสำหรับตัวเลือกเพิ่มเติมมากมาย แต่เพื่อให้มีคอลัมน์จำนวนพอเพียงด้านบน!

2. <table>หรือdisplay: table

ที่เรียบง่ายและวิธีที่เข้ากันได้มากที่จะทำเช่นนี้คือการใช้table- ผมอยากแนะนำให้คุณพยายามที่แรกถ้าคุณต้องการเก่า IE สนับสนุน คุณกำลังจัดการกับคอลัมน์ divs + float ไม่ใช่วิธีที่ดีที่สุดในการทำเช่นนั้น (ไม่พูดถึงความจริงที่ว่า div ที่ซ้อนกันหลายระดับเพื่อเจาะข้อ จำกัด css นั้นแทบจะไม่ "semantic" มากกว่าแค่ใช้ตารางธรรมดา) หากคุณไม่ต้องการใช้tableองค์ประกอบให้พิจารณา cssdisplay: table (ไม่รองรับ IE7 และรุ่นเก่ากว่า)

ตัวอย่าง: http://jsfiddle.net/emn13/7FFp3/

html ที่เกี่ยวข้อง: (แต่ให้พิจารณาใช้ล้วนๆ<table>)

<div class="parent"><div>column 1</div><div>column 2</div></div>

css ที่เกี่ยวข้อง:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

วิธีนี้มีประสิทธิภาพมากกว่าการใช้overflow:hiddenกับโฟลต คุณสามารถเพิ่มคอลัมน์จำนวนเท่าใดก็ได้ คุณสามารถปรับขนาดอัตโนมัติได้หากต้องการ และคุณคงความเข้ากันได้กับเบราว์เซอร์โบราณ คุณไม่จำเป็นต้องรู้ล่วงหน้าว่าคอลัมน์ใดยาวที่สุด ระดับความสูงก็โอเค

KISS:อย่าใช้แฮ็กโฟลตเว้นแต่ว่าคุณต้องการ หาก IE7 เป็นปัญหาฉันจะยังคงเลือกโต๊ะธรรมดาที่มีคอลัมน์เชิงความหมายผ่านโซลูชัน trick-CSS ที่ยากต่อการดูแลรักษาและยืดหยุ่นน้อยกว่าทุกวัน

อย่างไรก็ตามถ้าคุณต้องการให้เลย์เอาต์ของคุณตอบสนอง (เช่นไม่มีคอลัมน์ในโทรศัพท์มือถือขนาดเล็ก) คุณสามารถใช้@mediaเคียวรีเพื่อถอยกลับไปที่เลย์เอาต์บล็อกธรรมดาสำหรับความกว้างของหน้าจอขนาดเล็ก - ซึ่งทำงานได้ไม่ว่าคุณจะใช้<table>หรือdisplay: tableองค์ประกอบอื่น ๆ

3. display:inline blockแฮ็กมาร์จิ้นติดลบ

display:inline blockอีกทางเลือกหนึ่งคือการใช้งาน

ตัวอย่าง: http://jsbin.com/ovuqes/2/edit

html ที่เกี่ยวข้อง: (ไม่มีช่องว่างระหว่างdivแท็กสำคัญ!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

css ที่เกี่ยวข้อง:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

นี่เป็นเรื่องยุ่งยากเล็กน้อยและระยะขอบติดลบหมายความว่าด้านล่างของ "จริง" ของคอลัมน์นั้นถูกบดบัง ในทางกลับกันหมายความว่าคุณไม่สามารถวางตำแหน่งใด ๆ ที่เกี่ยวข้องกับด้านล่างของคอลัมน์เหล่านั้นเพราะถูกตัดออกoverflow: hiddenไป โปรดทราบว่านอกเหนือจากบล็อกแบบอินไลน์คุณสามารถบรรลุผลที่คล้ายกันกับลอย

TL; DR : ใช้flexboxถ้าคุณไม่สนใจ IE9 และรุ่นเก่ากว่า; ลองใช้ตาราง (css) หากตัวเลือกเหล่านั้นไม่เหมาะกับคุณมีแฮ็กมาร์เกตลบ แต่สิ่งเหล่านี้อาจทำให้เกิดปัญหาการแสดงผลแปลก ๆ ที่พลาดได้ง่ายในระหว่างการพัฒนาและมีข้อ จำกัด ด้านเลย์เอาต์ที่คุณต้องระวัง

สำหรับผู้ปกครอง:

display: flex;

สำหรับเด็ก:

align-items: stretch;

คุณควรเพิ่มคำนำหน้าตรวจสอบ caniuse

ฉันพบคำตอบมากมาย แต่อาจเป็นทางออกที่ดีที่สุดสำหรับฉัน

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

คุณสามารถตรวจสอบโซลูชันอื่น ๆ ได้ที่นี่http://css-tricks.com/fluid-width-equal-height-columns/

โปรดตั้งค่า div หลักเป็น div ย่อยoverflow: hidden
แล้วคุณสามารถตั้งค่าจำนวนมากสำหรับการเติมด้านล่าง ตัวอย่างเช่น
padding-bottom: 5000px
จากmargin-bottom: -5000px
นั้น div ลูกทั้งหมดจะเป็นความสูงของผู้ปกครอง
แน่นอนว่าสิ่งนี้จะไม่ทำงานหากคุณพยายามใส่เนื้อหาใน div parent (นอก div อื่น ๆ )

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

ตัวอย่าง: http://jsfiddle.net/Tareqdhk/DAFEC/

พ่อแม่มีความสูงหรือไม่? หากคุณตั้งค่าความสูงของผู้ปกครองเช่นนั้น

div.parent { height: 300px };

จากนั้นคุณสามารถทำให้เด็กยืดได้เต็มความสูงเช่นนี้

div.child-right { height: 100% };

แก้ไข

นี่คือวิธีที่คุณจะใช้ JavaScript

CSS table display เหมาะอย่างยิ่งสำหรับสิ่งนี้:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

คำตอบเดิม (สมมติว่าคอลัมน์ใด ๆ สามารถสูงได้):

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

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

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

ฉันไม่เชื่อว่าheight:100%จะได้ผลดังนั้นหากคุณไม่ทราบความสูงของ div อย่างชัดเจนฉันไม่คิดว่าจะมีโซลูชัน CSS ที่แท้จริง

ฉันใช้มันสำหรับส่วนความคิดเห็น:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

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

หากคุณทราบถึง bootstrap คุณสามารถทำได้อย่างง่ายดายโดยใช้คุณสมบัติ 'flex' สิ่งที่คุณต้องทำคือส่งคุณสมบัติ css ด้านล่างให้กับ parent div

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

.homepageSectionผู้ปกครองของฉันอยู่ที่ไหน ตอนนี้เพิ่ม div ลูกใน html ของคุณเป็น

<div class="abc col-md-6">
<div class="abc col-md-6">

ที่ abc คือลูกของฉัน div.You สามารถตรวจสอบความเท่าเทียมกันของความสูงใน div ลูกทั้งสองโดยไม่คำนึงถึงชายแดนเพียงแค่ให้ชายแดนกับลูก div

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

ฉันใช้สไตล์อินไลน์เพื่อให้ความคิด

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

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>