Buat div posisi absolut memperluas tinggi div induk

Seperti yang Anda lihat di CSS di bawah ini, saya ingin child2memposisikan dirinya sebelumnya child1. Ini karena situs yang saya kembangkan saat ini juga dapat berfungsi pada perangkat seluler, di mana child2seharusnya berada di bagian bawah, karena berisi navigasi yang saya inginkan di bawah konten pada perangkat seluler. - Kenapa tidak 2 masterpage? Ini adalah satu-satunya 2 divsyang diposisikan ulang di seluruh HTML, jadi 2 masterpage untuk perubahan kecil ini adalah berlebihan.

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2 memiliki ketinggian dinamis, karena subsitus yang berbeda dapat memiliki lebih banyak atau lebih sedikit item navigasi.

Saya tahu bahwa elemen-elemen yang diposisikan absolut dihilangkan dari aliran, sehingga diabaikan oleh elemen-elemen lain.
Saya mencoba pengaturan overflow:hidden;pada div induk, tetapi itu tidak membantu, begitu pula dengan clearfix.

Pilihan terakhir saya adalah JavaScript untuk memposisikan ulang keduanya divs, tetapi untuk sekarang saya akan mencoba dan melihat apakah ada cara non-JavaScript untuk melakukan ini.

Anda menjawab sendiri pertanyaan itu: "Saya tahu bahwa elemen-elemen yang diposisikan absolut dihilangkan dari aliran, sehingga diabaikan oleh elemen-elemen lain." Jadi, Anda tidak dapat mengatur tinggi badan orang tua sesuai dengan elemen yang benar-benar diposisikan.

Anda menggunakan ketinggian tetap atau Anda harus melibatkan JS.

Meskipun peregangan ke elemen dengan position: absolutetidak mungkin, ada sering solusi di mana Anda dapat menghindari posisi absolut sambil mendapatkan efek yang sama. Lihatlah biola ini yang memecahkan masalah dalam kasus khusus Anda http://jsfiddle.net/gS9q7/

Caranya adalah membalik urutan elemen dengan mengapung kedua elemen, yang pertama ke kanan, yang kedua ke kiri, sehingga yang kedua muncul terlebih dahulu.

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

Terakhir, tambahkan clearfix ke induk dan Anda selesai (lihat biola untuk solusi lengkap).

Secara umum, selama elemen dengan posisi absolut diposisikan di bagian atas elemen induk, kemungkinan besar Anda menemukan solusi dengan melayang elemen tersebut.

Feeela benar tetapi Anda bisa membuat orang tuadivmengontrak / memperluas ke elemen anak jika Anda membalikkandivposisiAndaseperti ini:

.parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

Ini seharusnya bekerja untuk Anda.

Ada cara yang cukup sederhana untuk menyelesaikan ini.

Anda hanya perlu menduplikasi konten child1 dan child2 di div relatif dengan tampilan: tidak ada di div induk. Ucapkan child1_1 dan child2_2. Letakkan child2_2 di atas dan child1_1 di bawah.

Ketika jquery Anda (atau apa pun) memanggil div absolut, cukup atur div relatif sesuai (child1_1 atau child2_2) dengan tampilan: blok DAN visibilitas: disembunyikan. Anak relatif akan tetap tidak terlihat tetapi akan membuat div orang tua lebih tinggi.

Dengan JavaScript murni, Anda hanya perlu mengambil tinggi static positionelemen anak Anda .child1menggunakan metode getComputedStyle () lalu menetapkan nilai pengambilan itu sebagai padding-topuntuk anak yang sama menggunakan properti HTMLElement.style .

Periksa dan jalankan Cuplikan Kode berikut untuk contoh praktis dari apa yang saya jelaskan di atas:

/* JavaScript */

var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");

var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;

/* CSS */

#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }

<!-- HTML -->

<div id="parent">
    <div class="child1">STATIC</div>
    <div class="child2">ABSOLUTE</div>
</div>

Pertanyaan ini ditanyakan pada 2012 sebelum flexbox. Cara yang benar untuk menyelesaikan masalah ini menggunakan CSS modern adalah dengan kueri media dan pembalikan kolom fleksibel untuk perangkat seluler. Tidak diperlukan penentuan posisi absolut.

https://jsfiddle.net/tnhsaesop/vjftq198/3/

HTML:

<div class="parent">
  <div style="background-color:lightgrey;">
    <p>
      I stay on top on desktop and I'm on bottom on mobile
    </p>
  </div>
  <div style="background-color:grey;">
    <p>
      I stay on bottom on desktop and I'm on bottom on mobile
    </p>
  </div>
</div>

CSS:

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

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

Saya punya masalah serupa. Untuk mengatasi ini (alih-alih menghitung tinggi iframe menggunakan tubuh, dokumen atau jendela) saya membuat div yang membungkus seluruh konten halaman (misalnya div dengan id = "halaman") dan kemudian saya menggunakan ketinggiannya.

Saya datang dengan solusi lain, yang saya tidak suka tetapi menyelesaikan pekerjaan.

Pada dasarnya menduplikasi elemen anak sedemikian rupa sehingga duplikat tidak terlihat.

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

.width-calc {
    height: 0;
    overflow: hidden;
}

Jika elemen-elemen anak tersebut mengandung sedikit markup, maka dampaknya akan kecil.

"Kamu bisa menggunakan ketinggian tetap atau kamu perlu melibatkan JS."

Berikut adalah contoh JS:

---------- contoh JS jQuery --------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);

Ada peretasan yang sangat sederhana yang memperbaiki masalah ini

Berikut adalah codesandbox yang menggambarkan solusinya: https://codesandbox.io/s/00w06z1n5l

HTML

<div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

CSS

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

Anda dapat bermain dengan posisi hack hack untuk memengaruhi posisi anak itu sendiri.

Berikut cuplikan:

html {
  font-family: sans-serif;
  text-align: center;
}

.container {
  border: 2px solid gray;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stuff-the-middle {
  background: papayawhip
    url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
  flex: 1;
}

.parent {
  background: palevioletred;
  position: relative;
}

.hack {
  position: absolute;
  left: 0;
  top:0;
  right: 0;
}
.child {
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

    <div class="container">
      <div class="stuff-the-middle">
        I have stuff annoyingly in th emiddle
      </div>
      <div class="parent">
        <div class="hack">
          <div class="child">
            I'm inside of my parent but absolutely on top
          </div>
        </div>
        I'm the parent
        <br /> You can modify my height
        <br /> and my child is always on top
        <br /> absolutely on top
        <br /> try removing this text
      </div>
    </div>

Ada cara yang lebih baik untuk melakukan ini sekarang. Anda dapat menggunakan properti terbawah.

    .my-element {
      position: absolute;
      bottom: 30px;
    }

Ini sangat mirip dengan yang disarankan @ChrisC. Itu tidak menggunakan elemen posisi absolut, tetapi elemen relatif. Mungkin bisa bekerja untukmu

<div class="container">
  <div class="my-child"></div>
</div>

Dan css Anda seperti ini:

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

Pertimbangkan juga pendekatan selanjutnya:

CSS:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

Juga karena Anda mencoba memposisikan divs pertimbangkan css grid

Tampilan absolut memposisikan diri terhadap leluhur terdekat yang tidak diposisikan secara statis ( position: static), oleh karena itu jika Anda ingin tampilan absolut diposisikan terhadap orang tua tertentu, atur orang tua positionke relativedan anak positionkeabsolute

Coba ini, itu berhasil untuk saya

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

Ini akan mengatur tinggi anak ke tinggi orang tua