308

Saya memiliki struktur halaman yang mirip dengan ini:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Saya ingin bagi orangtua divuntuk memperluas di heightsaat batin div's heightmeningkat.

Sunting:
Satu masalah adalah bahwa jika widthkonten anak meluas melewati widthjendela browser, CSS saya saat ini menempatkan scrollbar horizontal pada induknya div. Saya ingin bilah gulir berada di tingkat halaman. Saat ini div orangtua saya diatur keoverflow: auto;

Bisakah Anda membantu saya dengan CSS untuk ini?

html css Steve Horn
sumber

6

Apakah Anda mengambang div dalam? Bisakah Anda memposting CSS saat ini?

Eric

2

@ Eric - itu masalah saya juga - div anak saya telah melayang: kiri, ketika saya melepasnya 'orangtua' secara otomatis dikenali dan direntangkan ke ketinggian penuh!

Michael Goltsman

539

Coba ini untuk orang tua, itu berhasil untuk saya.

overflow:auto;

MEMPERBARUI:

Satu lagi solusi yang berhasil:

Induk :

display: table;

Anak :

display: table-row;

Dr Casper Black
sumber

67

overflow:autoberarti browser harus memutuskan nilai yang akan diterapkan. Yang benar-benar melakukan trik ini overflow: overlay.

Alba Mendez

14

@ jmendeth Nilai overflow yang disebut "overlay" tidak ada. Apa yang berfungsi jika div anak dilayang mendeklarasikan overflow:hidden.

Christoph

16

Waaaait. Bersantai. Satu hal yang mengklaim overlaytidak didukung di luar Webkit. Lain yang sama sekali berbeda adalah mengatakan itu tidak ada sama sekali. Tolong, RTFM dulu . ;)

Alba Mendez

6

Jika hanya ada di Webkit maka hanya 20% yang ada: P Cheers for the link, belum pernah melihat situs web ini sebelumnya. Apakah ini dirawat dan diperbarui? Apakah Anda bersumpah dengan itu?

pilau

20

Jawaban alternatif adalah stackoverflow.com/questions/450903/… dan mengusulkan untuk mengatur display:inline-block. Yang bekerja sangat bagus untuk saya.

Jens

26

tambahkan a clear:both. dengan asumsi bahwa kolom Anda mengambang. Bergantung pada bagaimana tinggi badan Anda ditentukan orang tua, Anda mungkin perlu overflow: otomatis;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

bendewey
sumber

Melakukan ini memberi saya bilah gulir horizontal pada div induk ketika konten lebih luas dari jendela browser. Saya ingin gulir horizontal ada di seluruh halaman.

Steve Horn

1

Mengapa Anda perlu overflow: otomatis ;? Dalam pengujian saya jelas: keduanya; cukup.

Paolo Bergantino

3

Ini juga dengan asumsi bahwa orang tua tidak memiliki ketinggian yang ditentukan.

bendewey

Pendekatan ini berfungsi baik di Firefox, tetapi tidak berfungsi di IE 6. Ada solusi?

Steve Horn

16

Seperti yang dikatakan Jens dalam komentar

Jawaban alternatifnya adalah Bagaimana membuat div tidak lebih besar dari isinya? ... dan ia mengusulkan untuk mengatur tampilan: inline-block. Yang bekerja sangat bagus untuk saya. - Jens 2 Juni jam 5:41

Ini bekerja jauh lebih baik untuk saya di semua browser.

berisik
sumber

13

Cobalah berikan max-contentuntuk tinggi badan orang tua.

.parent{
   height: max-content;
}

https://jsfiddle.net/FreeS/so4L83wu/5/

Skotee
sumber

Bagaimana perilaku properti itu dengan browser lain? Di MDN: developer.mozilla.org/en-US/docs/Web/CSS/…

Robert Molina

Ini tampaknya menjadi satu-satunya hal yang memperbaiki masalah di Safari 12.

Ben Wheeler

nilai css yang luar biasa! tidak didukung di Tepi ¯_ (ツ) _ / ¯

Samer Murad

4

Bagi mereka yang tidak bisa mengetahui ini dalam instruksi dari jawaban ini di sana:

Cobalah untuk set bantalan nilai lebih maka 0 , jika divs anak memiliki margin-top atau margin-bottom Anda bisa menggantinya dengan bantalan

Misalnya kalau sudah

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

akan lebih baik untuk menggantinya dengan:

#parent
{
    padding: 30px 0px 20px 0px;
}

imy
sumber

4

Menggunakan sesuatu seperti diri kliring divsangat cocok untuk situasi seperti ini . Maka Anda hanya akan menggunakan kelas pada induk ... seperti:

<div id="parent" class="clearfix">

Tim Knight
sumber

3

Menambahkan

clear:both;

Ke css dari div induk, atau tambahkan div di bagian bawah div induk yang jelas: keduanya;

Itu jawaban yang benar, karena melimpah: otomatis; mungkin berfungsi untuk tata letak web sederhana, tetapi akan mengacaukan dengan elemen yang mulai menggunakan hal-hal seperti margin negatif, dll

Boise Pemasaran Internet
sumber

2

Apakah ini melakukan apa yang Anda inginkan?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Eric
sumber

1

Apakah Anda mencari tata letak CSS 2 kolom ?

Jika demikian, lihat petunjuknya , cukup mudah untuk memulai.

lpfavreau
sumber

1

Saya membuat div orangtua memperluas konten div anak dengan meminta div anak sebagai satu kolom yang tidak memiliki atribut pemosisian seperti yang ditentukan absolut.

Contoh:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

Didasarkan pada maincolumn div yang merupakan div anak terdalam #wrap, ini mendefinisikan kedalaman #wrap div dan pad 200px di kedua sisi menciptakan dua kolom kosong besar bagi Anda untuk menempatkan div yang benar-benar diposisikan sesukamu. Anda bahkan dapat mengubah padding atas dan bawah untuk menempatkan div header dan footer div menggunakan posisi: absolut.

Ian
sumber

0

Anda harus menerapkan solusi clearfix pada wadah induk. Berikut ini adalah artikel bagus yang menjelaskan tautan perbaikan

Nikhil
sumber

0

Jika konten Anda di dalam #childRightCol dan #childRightCol melayang ke kiri atau kanan, tambahkan saja ini ke css:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }

pengguna3436572
sumber

0

Ini berfungsi sebagaimana dijelaskan oleh spesifikasi - beberapa jawaban di sini valid, dan konsisten dengan yang berikut:

Jika memiliki anak tingkat blok, ketinggian adalah jarak antara tepi batas atas kotak anak tingkat blok paling atas yang tidak memiliki margin yang runtuh melaluinya dan tepi batas bawah dari kotak anak tingkat blok paling bawah. yang tidak memiliki margin yang runtuh melaluinya. Namun, jika elemen memiliki padding dan / atau batas atas yang bukan nol, atau elemen root, maka konten dimulai pada tepi margin atas anak paling atas. (Kasus pertama mengungkapkan fakta bahwa margin atas dan bawah elemen runtuh dengan anak-anak yang paling atas dan paling bawah, sedangkan dalam kasus kedua kehadiran padding / perbatasan mencegah margin atas dari runtuh.) Demikian pula, jika elemen memiliki padding bawah nol dan / atau batas bawah, maka konten berakhir di tepi margin bawah anak paling bawah.

dari sini: https://www.w3.org/TR/css3-box/#blockwidth

Adam Tolley
sumber

0

Kode di bawah ini berfungsi untuk saya.

css

.parent{
    overflow: auto;
}

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>

anjaneyulubatta505
sumber

0

#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
    display:inline;
}

Luaskan cuplikan

YourBestBet
sumber

0

Darimana Kita Mulai

Inilah beberapa boilerplate HTML dan CSS. Dalam contoh kami, kami memiliki elemen induk dengan dua elemen anak melayang.

/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}

<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>

Luaskan cuplikan

Solusi # 1: overflow: otomatis

Solusi yang bekerja di semua browser modern dan di Internet Explorer kembali ke IE8 adalah menambahkan overflow: autoelemen induk. Ini juga berfungsi di IE7, dengan scrollbar ditambahkan.

/* Our Modified CSS.
 * This is one way we can solve our problem.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto;
  /*This is what we added!*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}

Luaskan cuplikan

Solusi # 2: Wadah Induk Apung

Solusi lain yang berfungsi di semua browser modern dan kembali ke IE7 adalah dengan mengapung wadah induk.

Ini mungkin tidak selalu praktis, karena mengambang div orangtua Anda dapat mempengaruhi bagian lain dari tata letak halaman Anda.

/* Modified CSS #2.
 * Floating parent div.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left;
  /*Added*/
  height: auto;
  width: 100%;
  /*Added*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}

Luaskan cuplikan

Metode # 3: Tambahkan Kliring Kliring Di Bawah Elemen Melayang

/* 
 * CSS to Solution #3.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clear {
  clear: both;
}

<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>

Luaskan cuplikan

Metode # 4: Tambahkan Kliring Kliring ke Elemen Induk Solusi ini cukup anti peluru untuk peramban lama dan peramban baru.

/* 
 * CSS to Solution #4.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}

<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>

Luaskan cuplikan

dari https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/

jafar690
sumber

-1

Saya menggunakan CSS ini untuk orang tua dan berfungsi:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;

pejman
sumber

2

Anda menggunakan ketinggian minimum, jadi tidak masuk hitungan;)

pilau

-1

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}

<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>

Luaskan cuplikan

Anda dikelola dengan menggunakan overflow:hidden;properti di css

chintan kotadiya
sumber

Memperluas orangtua <div> hingga ketinggian anak-anaknya

Jawaban:

css

html