Bagaimana cara membuat div melayang tinggi 100% dari induknya?


256

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?


1
Jadi Anda ingin teks di div luar (bukan di div batin), tetapi div batin melayang menjadi ketinggian div luar?
edl

Apa hasil akhir yang ingin Anda capai? Saya kira kebingungan saya terletak pada jika bagian dalam setinggi bagian luar dan bagian luar sama tingginya dengan teks, bukankah itu sama dengan memiliki teks di bagian dalam?
edl

2
@edl: Ya, itu :) Alasan saya menginginkannya adalah karena div bagian dalam memiliki gambar sebagai latar belakangnya. Teks harus di sampingnya. Keduanya harus di dalam div luar karena memiliki gambar latar belakang juga.
Nathan Osman


2
Melihat dan mencoba jawaban atas pertanyaan ini sungguh menyedihkan.
EternalHour

Jawaban:


125

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.


118
Hmm .. pertanyaannya adalah tentang Floated div's. Anda menjawab tentang benar-benar posisi div
Mihkel L.

57
Saya tidak pernah berhenti mengejutkan betapa rumitnya mencapai hal-hal sederhana yang gila-gilaan di HTML/CSS:)
Yuriy Nakonechnyy

15
Adakah cara untuk melakukan ini tanpa lebar hardcoding? Tidak bagus untuk wadah responsif.
Jake Wilson

23
Saya tidak tahu mengapa hal ini diterima dan sangat dinaikkan. Pertanyaannya adalah tentang div yang mengambang, yang membawa saya ke sini dari pencarian saya, dan sebaliknya jawaban ini benar-benar menempatkan divs.
Matt K

2
Bagaimana cara membuat wadah apung sesuai dengan wadahnya? Dengan tidak membuatnya melayang lagi! Ha ha. Usaha yang bagus, dan cukup dekat untuk dianggap berguna, sebenarnya.
Rolf

124

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/


3
Anda harus menunjukkan bahwa ini hanya berfungsi di browser modern, dan itupun membutuhkan awalan vendor.
kontur

12
Saya terkejut solusi ini belum mendapat perhatian lebih, mengingat bahwa pertanyaan awal mengharuskan div anak mengambang dan semua posisi: solusi absolut benar-benar melemparkan kunci pas dalam pekerjaan di sebagian besar situasi di mana Anda akan menggunakan float. Solusi ini memberikan solusi hebat di mana efek samping posisi: absolut bukan masalah dan jika Anda ingin menggali sedikit lebih jauh, dimungkinkan untuk mendapatkan kompatibilitas lintas-browser yang cukup bagus.
Luke

Ini jawabannya di sini. IE9 akan segera keluar, mungkin bisa membantu dengan memberikan tendangan yang bagus dan solid. Solusi ini sangat bagus, sederhana, dan mudah ... Saya sudah selesai meretas solusi alternatif. ;)
jrista

2
Menurut spesifikasi terbaru untuk Flexbox: lihat w3.org/TR/css-flexbox-1/#align-items-property . align-items: stretch;tidak diperlukan karena ini adalah nilai default. Juga harus didefinisikan pada orang tua bukan anak.
toddsby

1
Menambahkan biola sebagai jawaban. @ Tigran
Aiphee

77

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>

14
Keren, ini kurang membatasi dari persyaratan Chadwick tentang position:absolute(yang dapat mengganggu gaya situs)
henry

3
Bisa jadi hanya saya, tapi saya punya masalah jika bilah sisi lebih besar dari konten. Warna latar belakang akan berhenti di wadah induk tetapi konten bilah sisi akan meluap di luar induk.
Howdy_McGee

Ini adalah solusi yang jauh lebih fleksibel, dan bahkan jika Anda memiliki beberapa elemen anak melayang, tampaknya merupakan kelemahan yang dapat diterima untuk mengatur offset mereka yang benar-benar diposisikan. +1
kontur

Terima kasih sangat banyak. Saya telah memposting solusi spesifik saya sebagai jawaban untuk pertanyaan lain pada SO: stackoverflow.com/a/31749164/84661 .
Brian Haak

24

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.


Meskipun ini akan berhasil, itu tidak akan menunjukkan margin, bahkan jika Anda menentukannya. Jadi solusi ini akan gagal jika Anda ingin memberikan margin. Anda dapat menetapkan padding sebagai solusi, tetapi bagaimana Anda menyelesaikannya jika Anda membutuhkan margin (& bukan padding)?
Devner

13
Apakah saya melewatkan sesuatu di sini? Pertanyaan Anda meminta elemen melayang memiliki tinggi 100%. Ketika melayang, suatu display: table-cell;elemen tidak mengisi ketinggian wadahnya lagi? Aku pasti melewatkan sesuatu, karena itu pertanyaanmu sendiri ...?
user56reinstatemonica8

16

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.


1
Ini adalah solusi yang solid untuk situasi di mana Anda dapat menjamin bahwa .rightkonten kolom lebih pendek dari .leftkonten kolom. Misalnya, jika Anda menggunakan ini pada komponen di mana .leftkolom memiliki beberapa konten berukuran bervariasi dan kolom kanan hanya menampilkan panah ke halaman detail maka solusi ini berfungsi dengan baik. +1 untuk itu
Zachary Kniebel

15

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%


8

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.


18
Tampaknya terlalu banyak membuang javascript pada masalah tata letak ini.
kontur

1
Sebagai seseorang yang harus berkembang di IE: Terima kasih!
Benteng

1
Mungkin sedikit berlebihan, tapi ini jawaban yang bagus, terima kasih!
Martin

1
Saya setuju bahwa semua masalah penentuan posisi harus diselesaikan tanpa JS.
michaeluskov

1
Sangatlah sulit untuk menggunakan JS AND jQuery
ViliusL

3

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


1

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.


1

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.


-1

mencoba

#outer{overflow: auto;}

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


opsi "overflow: hidden" tampaknya bekerja lebih baik karena tidak ada peluang untuk bergulir ...
Rodrigo Barreiro

Jika Anda menemukan solusi yang lebih baik, Anda dapat mengedit jawaban Anda. Juga, akan lebih baik jika Anda menambahkan lebih banyak informasi ke jawaban Anda, seperti misalnya informasi yang disediakan dalam tautan.
Donald Duck
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.