Pertanyaan Bagaimana cara membuat div 100% tinggi relatif terhadap orang tua?


Saya terjebak dengan sesuatu seperti di bawah ini. Saya harus membuat div 100% tinggi di bagian atas (bgcolor-nya akan menutupi ketinggian penuh dari div utama).

<body>
    <div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;">
        <div id="left" style="float: left; width: 600px; background-color: #A7C864;">
            <div id="left-top">left-top</div>
            <div id="left-bottom">left-bottom</div>
        </div>
        <div id="right" style="float: right; width: 200px; background-color: #C7E48E;">
            <div id="right-top">right-top</div>
        </div>
        <div style="clear: both;"></div>
    </div>
</body>

Contoh kerja di sini: http://marioosh.net/lay1.html

Menggunakan tabel itu mudah: http://marioosh.net/lay2.html


5
2018-01-21 08:45


asal


Jawaban:


Saya mungkin salah memahami pertanyaan (tautan Anda ke contoh berbasis tabel tidak berfungsi), tetapi sepertinya Anda mencoba membuat dua kolom dengan tinggi yang sama. Ada beberapa teknik yang dapat Anda gunakan, di sini ada tiga teknik:

  1. Anda bisa memberi masing-masing DIV padding bawah besar, dan margin bawah yang sama besar, tetapi negatif.

    #main {
        overflow: hidden;
    }
    #left, #right {
        float: left;
        padding-bottom: 1000em;
        margin-bottom: -1000em;
    }
    

    Solusi ini bukan tanpa masalah; jika Anda mencoba menautkan ke elemen di salah satu kolom (mis. Anda memiliki elemen di salah satu kolom dengan id=foo dan Anda tautkan ke mypage.html#foo) maka tata letak akan rusak. Ini juga sulit untuk menambahkan batas bawah menggunakan teknik ini.

    Contoh lengkap dari Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html

  2. Anda dapat memberikan salah satu kolom margin kanan negatif, dan yang lainnya batas kiri yang sangat lebar.

    #left, #right {
        float: left;
    }
    #left {
        background: red;
        width: 200px;
        margin-right: -200px;
    }
    #right {
        border-left: 200px solid red;
    }
    

    Informasi lebih lanjut tentang Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/

  3. Anda bisa memalsukannya dengan memberi #main gambar latar belakang yang menyertakan latar belakang untuk kedua kolom. Teknik ini dikenal sebagai "Kolom Faux" dan berguna ketika Anda ingin latar belakang yang rumit, atau perbatasan dekoratif di antara kolom.

    Informasi lebih lanjut tentang A List Apart: http://www.alistapart.com/articles/fauxcolumns/

Sebagai salah satu komentator pada pertanyaan yang disebutkan, Anda juga dapat menggunakan tabel. Namun, kecuali Anda menampilkan data tabular TABLE bukan elemen HTML yang sesuai.


5
2018-02-05 20:26



Anda perlu mengatur ketinggian elemen induk untuk mengaktifkan ketinggian 100%. Jika Anda mengatur keduanya ke tinggi 100% Anda harus mendapatkan efek yang Anda cari


-2
2018-01-21 08:51