Bagaimana cara membuat div melayang tinggi 100% dari induknya?

Ini HTML-nya:

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

Dan di sini adalah CSS:

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

Setelah diperiksa dengan alat pengembang Chrome, div bagian dalam mendapatkan ketinggian 0px.

Bagaimana saya bisa memaksanya 100% dari ketinggian div induk?

Agar #outerketinggian didasarkan pada kontennya, dan #innermendasarkan tingginya pada itu, membuat kedua elemen benar-benar diposisikan.

Rincian lebih lanjut dapat ditemukan dalam spesifikasi untuk properti tinggi css , tetapi pada dasarnya, #innerharus mengabaikan #outerketinggian jika #outertinggi auto, kecuali #outer diposisikan mutlak. Maka #innertinggi akan menjadi 0, kecuali jika #inner dirinya diposisikan mutlak.

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

Namun ... Dengan memposisikan secara #innermutlak, floatpengaturan akan diabaikan, jadi Anda harus memilih lebar untuk #innersecara eksplisit, dan menambahkan padding #outeruntuk memalsukan pembungkus teks yang saya duga Anda inginkan. Misalnya, di bawah ini, bantalan #outeradalah lebar #inner+3. Mudah (karena intinya adalah untuk mendapatkan #innerketinggian hingga 100%) tidak perlu membungkus teks di bawahnya #inner, jadi ini akan terlihat seperti #innermelayang.

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

Saya menghapus jawaban saya sebelumnya, karena didasarkan pada terlalu banyak asumsi yang salah tentang tujuan Anda.

Untuk orang tua:

display: flex;

Anda harus menambahkan beberapa awalan http://css-tricks.com/using-flexbox/

Sunting: Hanya kekurangannya adalah IE seperti biasa, IE9 tidak mendukung flex. http://caniuse.com/flexbox

Sunting 2: Seperti yang dicatat @toddsby, menyelaraskan item adalah untuk orang tua, dan nilai defaultnya sebenarnya adalah peregangan . Jika Anda menginginkan nilai yang berbeda untuk anak, ada properti align-self.

Sunting 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

Sebenarnya, selama elemen induk diposisikan, Anda dapat mengatur tinggi anak hingga 100%. Yaitu, jika Anda tidak ingin orang tua diposisikan benar-benar. Biarkan saya jelaskan lebih lanjut:

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

Selama Anda tidak perlu mendukung versi Internet Explorer lebih awal dari IE8, Anda dapat menggunakannya display: table-celluntuk mencapai ini:

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

Ini akan memaksa setiap elemen dengan .innerkelas untuk menempati ketinggian penuh elemen induknya.

Saya membuat contoh untuk menyelesaikan masalah Anda.

Anda harus membuat pembungkus, mengapungkannya, lalu posisikan absolut div Anda dan berikan padanya 100% tinggi.

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

Penjelasan: The .right div benar-benar diposisikan. Itu berarti lebar dan tinggi, dan posisi atas dan kiri akan dihitung berdasarkan div induk pertama secara absolut atau relatif diposisikan HANYA jika properti lebar atau tinggi dinyatakan secara eksplisit dalam CSS; jika tidak dinyatakan secara eksplisit, properti tersebut akan dihitung berdasarkan wadah induk (.right-wrapper).

Jadi, tinggi 100% DIV akan dihitung berdasarkan tinggi final .container, dan posisi akhir posisi .right akan dihitung berdasarkan wadah induk.

Ini dia cara sederhana untuk mencapai itu:

1. Atur tampilan wadah tiga elemen (#outer): tabel
2. Dan mengatur elemen sendiri (#inner) tampilan: table-cell
3. Hapus mengambang.
4. Keberhasilan.

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

Berkat @Itu di Floated div, tinggi 100%

Jika Anda siap menggunakan sedikit jQuery, jawabannya sederhana!

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

Ini bekerja dengan baik untuk melayang elemen tunggal ke sisi dengan ketinggian 100% dari induknya sedangkan elemen melayang lainnya yang biasanya membungkus disimpan di satu sisi.

Semoga ini bisa membantu sesama penggemar jQuery.

Ini adalah contoh kode untuk sistem grid dengan ketinggian yang sama.

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

Di atas adalah CSS untuk div luar

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

Di atas adalah bagian dalam

Semoga ini bisa membantu Anda

Ini membantu saya.

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

Ubah kanan: dan kiri: untuk mengatur lebar #inner yang diinginkan.

Kasus serupa ketika Anda membutuhkan beberapa elemen anak yang memiliki tinggi yang sama dapat diselesaikan dengan flexbox:

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

Ditetapkan display: flex;untuk flex: 1;elemen orangtua dan anak, semuanya akan memiliki ketinggian yang sama.

mencoba

#outer{overflow: auto;}

perlihatkan lebih banyak opsi di: Bagaimana Anda mencegah orang tua dari elemen melayang tidak runtuh?