วิธีการทำให้ div ความสูง 100% ของพาเรนต์ลอย

นี่คือ HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

และนี่คือ CSS:

#inner {
  float: left;
  height: 100%;
}

เมื่อตรวจสอบด้วยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome div ภายในจะมีความสูงถึง 0px

ฉันจะบังคับให้เป็น 100% ของส่วนสูงของผู้ปกครองได้อย่างไร

สำหรับ#outerความสูงจะขึ้นอยู่กับเนื้อหาและมี#innerความสูงตามนั้นทำให้องค์ประกอบทั้งสองอยู่ในตำแหน่งที่แน่นอน

รายละเอียดเพิ่มเติมสามารถพบได้ในสเปคสำหรับคุณสมบัติ CSS สูงแต่เป็นหลัก#innerจะต้องละเว้น#outerความสูงถ้า#outerสูงก็คือauto, เว้นแต่ #outerอยู่ในตำแหน่งอย่างแน่นอน แล้ว#innerความสูงจะเป็น 0, เว้นแต่ #innerตัวเองอยู่ในตำแหน่งอย่างแน่นอน

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

อย่างไรก็ตาม ... ด้วยการวางตำแหน่ง#innerอย่างแน่นอนการfloatตั้งค่าจะถูกละเว้นดังนั้นคุณจะต้องเลือกความกว้างสำหรับ#innerอย่างชัดเจนและเพิ่มการเติม#outerเพื่อปลอมการตัดข้อความที่ฉันสงสัยว่าคุณต้องการ ตัวอย่างเช่นด้านล่างช่องว่างภายในของ#outerคือความกว้างของ#inner+3 สะดวกสบาย (โดยรวมคือเพื่อให้ได้#innerความสูงถึง 100%) ไม่จำเป็นต้องห่อข้อความไว้ด้านล่าง#innerดังนั้นสิ่งนี้จะดูเหมือน#innerลอยอยู่

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

ฉันลบคำตอบก่อนหน้าของฉันเนื่องจากมีข้อสันนิษฐานผิดเกี่ยวกับเป้าหมายของคุณมากเกินไป

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

display: flex;

คุณควรเพิ่มคำนำหน้าบางส่วนhttp://css-tricks.com/using-flexbox/

แก้ไข: ข้อเสียเปรียบเท่านั้นคือ IE ตามปกติ IE9 ไม่สนับสนุนการดิ้น http://caniuse.com/flexbox

แก้ไข 2: ตามที่ @toddsby สังเกตว่าการจัดเรียงรายการนั้นสำหรับพาเรนต์และค่าเริ่มต้นของมันจะยืดออก หากคุณต้องการค่าที่แตกต่างกันสำหรับเด็กมีคุณสมบัติการจัดตำแหน่งตัวเอง

แก้ไข 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

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

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

ตราบใดที่คุณไม่จำเป็นต้องสนับสนุน Internet Explorer รุ่นก่อนหน้า IE8 คุณสามารถใช้display: table-cellเพื่อทำสิ่งนี้:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

สิ่งนี้จะบังคับให้แต่ละองค์ประกอบกับ.innerคลาสครอบครองความสูงเต็มขององค์ประกอบหลัก

ฉันทำตัวอย่างเพื่อแก้ไขปัญหาของคุณ

คุณต้องทำเสื้อคลุมลอยแล้ววางตำแหน่ง Div ของคุณอย่างสมบูรณ์และให้ความสูง 100%

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

คำอธิบาย: . div ที่ถูกต้องอยู่ในตำแหน่งที่แน่นอน นั่นหมายความว่าความกว้างและความสูงและตำแหน่งด้านบนและด้านซ้ายจะถูกคำนวณตามผู้ปกครองคนแรกที่วางตำแหน่งอย่างแน่นอนหรือสัมพันธ์กันเท่านั้นหากคุณสมบัติความกว้างหรือความสูงมีการประกาศอย่างชัดเจนใน CSS; หากไม่ได้ประกาศอย่างชัดเจนคุณสมบัติเหล่านั้นจะถูกคำนวณโดยยึดตามพาเรนต์คอนเทนเนอร์ (.right-wrapper)

ดังนั้นความสูง 100% ของ DIV จะถูกคำนวณตามความสูงสุดท้ายของคอนเทนเนอร์และตำแหน่งสุดท้ายของตำแหน่ง. right จะถูกคำนวณตามคอนเทนเนอร์หลัก

นี่เป็นวิธีที่ง่ายกว่าในการบรรลุเป้าหมายดังกล่าว:

1. ตั้งค่าจอแสดงผลสามส่วน (#outer) container: table
2. และตั้งค่าองค์ประกอบของตัวเอง (#inner) จอแสดงผล: ตารางเซลล์
3. ลบลอย
4. ความสำเร็จ

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

ขอบคุณ @Itay ใน Floated div ความสูง 100%

หากคุณพร้อมที่จะใช้ jQuery เล็กน้อยคำตอบนั้นง่าย!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

วิธีนี้ใช้งานได้ดีสำหรับการลอยองค์ประกอบเดียวไปยังด้านที่มีความสูง 100% ขององค์ประกอบหลักในขณะที่องค์ประกอบลอยอื่น ๆ ซึ่งปกติจะล้อมรอบจะถูกเก็บไว้ที่ด้านหนึ่ง

หวังว่านี่จะช่วยให้แฟน ๆ jQuery

นี่คือตัวอย่างโค้ดสำหรับระบบกริดที่มีความสูงเท่ากัน

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

ด้านบนเป็น CSS สำหรับ div ภายนอก

#inner{
width: 20%;
float: left;
border: 1px solid;
}

ด้านบนคือ div ภายใน

หวังว่านี่จะช่วยคุณได้

สิ่งนี้ช่วยฉัน

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

เปลี่ยนขวา: และซ้าย: เพื่อตั้งค่าความกว้าง #inner ที่ต้องการ

กรณีที่คล้ายกันเมื่อคุณต้องการองค์ประกอบลูกหลายมีความสูงเดียวกันสามารถแก้ไขได้ด้วย flexbox:

https://css-tricks.com/using-flexbox/

ตั้งค่าdisplay: flex;สำหรับผู้ปกครองและflex: 1;องค์ประกอบลูกพวกเขาทั้งหมดจะมีความสูงเท่ากัน

ลอง

#outer{overflow: auto;}

แสดงตัวเลือกเพิ่มเติมใน: คุณจะป้องกันไม่ให้ผู้ปกครองขององค์ประกอบลอยได้อย่างไร?