Bagaimana cara memaksa div anak menjadi 100% tinggi orangtua div tanpa menentukan tinggi orangtua?

Saya punya situs dengan struktur berikut:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Navigasi di sebelah kiri dan konten div di sebelah kanan. Informasi untuk div konten ditarik melalui PHP, jadi setiap kali berbeda.

Bagaimana saya bisa menskalakan navigasi secara vertikal sehingga tingginya sama dengan tinggi div konten, tidak peduli halaman mana yang dimuat?

CATATAN : Jawaban ini berlaku untuk browser lawas tanpa dukungan untuk standar Flexbox. Untuk pendekatan modern, lihat: https://stackoverflow.com/a/23300532/1155721

Saya sarankan Anda melihat Kolom Ketinggian yang Sama dengan Cross-Browser CSS dan No Hacks .

Pada dasarnya, melakukan ini dengan CSS dengan cara yang kompatibel dengan browser bukan hal sepele (tetapi sepele dengan tabel) jadi temukan sendiri solusi tepat yang telah dikemas sebelumnya.

Juga, jawabannya bervariasi pada apakah Anda ingin tinggi 100% atau sama tinggi. Biasanya tingginya sama. Jika tinggi 100% jawabannya sedikit berbeda.

Untuk orang tua:

display: flex;

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

Sunting: Seperti yang dicatat @Adam Garner, luruskan-item: regangkan; tidak dibutuhkan. Penggunaannya juga untuk orang tua, bukan anak-anak. Jika Anda ingin mendefinisikan peregangan anak, Anda menggunakan menyelaraskan diri.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Ini adalah masalah yang membuat frustrasi yang berurusan dengan desainer sepanjang waktu. Caranya adalah Anda perlu mengatur ketinggian hingga 100% pada BODY dan HTML di CSS Anda.

html,body {
    height:100%;
}

Kode yang tampaknya tidak berguna ini adalah untuk mendefinisikan ke browser apa arti 100%. Frustrasi, ya, tetapi merupakan cara paling sederhana.

Saya menemukan bahwa pengaturan dua kolom untuk display: table-cell;bukannya float: left;berfungsi dengan baik.

Jika Anda tidak keberatan div navigasi terpotong saat div konten pendek tiba-tiba, setidaknya ada satu cara mudah:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Selain itu ada teknik faux-kolom .

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

menggunakan jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Coba buat margin bawah 100%.

margin-bottom: 100%;

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Lihatlah contoh ini .

height : <percent>hanya akan berfungsi jika Anda memiliki semua simpul induk dengan tinggi persen yang ditentukan dengan ketinggian tetap dalam piksel, ems, dll. di tingkat atas. Dengan begitu, ketinggian akan turun ke elemen Anda.

Anda dapat menentukan 100% untuk html dan elemen tubuh seperti @Travis dinyatakan sebelumnya untuk memiliki tinggi halaman yang turun ke node Anda.

Setelah lama mencari dan mencoba, tidak ada yang menyelesaikan masalah saya kecuali

style = "height:100%;"

pada div anak-anak

dan untuk orang tua berlaku ini

.parent {
    display: flex;
    flex-direction: column;
}

juga, saya menggunakan bootstrap dan ini tidak merusak responsif untuk saya.

Berdasarkan metode yang dijelaskan dalam artikel ini saya telah membuat solusi dinamis. Kurang:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Kurang:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

Tambahkan display: gridke induknya

Saya tahu ini sudah lama sejak pertanyaan itu dibuat, tetapi saya menemukan solusi yang mudah dan berpikir seseorang dapat menggunakannya (maaf tentang bahasa Inggris yang buruk). Ini dia:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

Contoh sederhana. Perhatikan bahwa Anda dapat berubah menjadi responsif.

Solusi saya:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

Ada sedikit kontradiksi dalam judul pertanyaan dan kontennya. Judul berbicara tentang div induk, tetapi pertanyaannya membuatnya seperti Anda ingin dua div saudara kandung (navigasi dan konten) memiliki ketinggian yang sama.

Apakah Anda (a) ingin navigasi dan konten 100% ketinggian utama, atau (b) ingin navigasi dan konten sama tingginya?

Saya akan menganggap (b) ... jika demikian, saya tidak berpikir Anda akan dapat melakukannya dengan struktur halaman Anda saat ini (setidaknya, tidak dengan CSS murni dan tanpa skrip). Anda mungkin perlu melakukan sesuatu seperti:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

dan atur div konten untuk memiliki margin kiri berapa pun lebar panel navigasi. Dengan begitu, konten konten berada di sebelah kanan navigasi dan Anda dapat mengatur div navigasi menjadi 100% dari tinggi konten.

EDIT: Saya melakukan ini sepenuhnya di kepala saya, tetapi Anda mungkin juga perlu mengatur margin kiri div navigasi ke nilai negatif atau mengatur itu mutlak dibiarkan 0 untuk mendorongnya kembali ke paling kiri. Masalahnya adalah, ada banyak cara untuk melakukan ini tetapi tidak semuanya akan kompatibel dengan semua browser.

[Mengacu pada kode Kurang Dmity dalam jawaban lain] Saya menduga ini semacam "kode semu"?

Dari apa yang saya pahami coba gunakan teknik faux-kolom yang harus melakukan trik.

http://www.alistapart.com/articles/fauxcolumns/

Semoga ini membantu :)

Trik ini berfungsi: Menambahkan elemen terakhir di bagian HTML Anda dengan gaya hapus: keduanya;

    <div style="clear:both;"></div>

Semuanya sebelum itu akan dimasukkan dalam ketinggian.

memberi position: absolute;kepada anak itu berhasil dalam kasus saya

Anda menggunakan CSS Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Jawaban ini tidak ideal lagi karena CSS flexbox dan kisi di mana diterapkan ke CSS. Namun itu masih merupakan solusi yang berhasil

Pada layar yang lebih kecil Anda mungkin ingin menjaga ketinggian otomatis karena col1, col2 dan col3 ditumpuk satu sama lain.

Namun setelah breakpoint kueri media Anda ingin cols muncul di sebelah satu sama lain dengan ketinggian yang sama untuk semua kolom.

1125 px hanya merupakan contoh breakpoint lebar jendela dan setelah itu Anda ingin membuat semua kolom diatur ke ketinggian yang sama.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

Anda bisa, tentu saja, menetapkan lebih banyak breakpoint jika perlu.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

Saya memiliki masalah yang sama, ini bekerja berdasarkan jawaban Hakam Fostok, saya telah membuat contoh kecil, dalam beberapa kasus mungkin berhasil tanpa harus menambahkan display: flex;dan flex-direction: column;pada wadah induk

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

Seperti yang ditunjukkan sebelumnya, flexbox adalah yang termudah. misalnya.

#main{ display: flex; align-items:center;}

ini akan menyelaraskan semua elemen anak ke pusat di dalam elemen induk.

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

Dari:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

menyatakan bootstrap tetapi Anda tidak perlu bootstrap untuk menggunakan ini. Menjawab pertanyaan lama ini, karena ini berhasil untuk saya, dan sepertinya cukup mudah untuk diterapkan.

Ini adalah jawaban yang sama yang saya berikan untuk Pertanyaan ini

Berikut demo mode lama berdasarkan position: absolutewadah konten danposition: relative wadah induk.

Adapun cara modern untuk melakukannya - kotak fleksibel adalah yang terbaik.

Cara termudah untuk melakukan ini adalah dengan memalsukannya. Apart List telah membahas hal ini secara ekstensif selama bertahun-tahun, seperti dalam artikel ini dari Dan Cederholm dari 2004 .

Begini cara saya biasanya melakukannya:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

Anda dapat dengan mudah menambahkan header ke desain ini dengan membungkus #container di div lain, menanamkan header header sebagai saudara # kontainer, dan memindahkan gaya margin dan lebar ke wadah induk. Selain itu, CSS harus dipindahkan ke file yang terpisah dan tidak disimpan sebaris, dll. Akhirnya, kelas clearfix dapat ditemukan pada positioniseverything .