Mutlak konumlandırılmış div öğesini ana div yüksekliğini genişletme

Aşağıdaki CSS'de görebileceğiniz gibi, daha child2önce kendini konumlandırmak istiyorum child1. Bunun nedeni, şu anda geliştirdiğim sitenin, mobil cihazlarda child2içeriğin altında olmasını istediğim gezinmeyi içerdiği için, altta olması gereken mobil cihazlarda da çalışması gerektiğidir. - Neden 2 masterpage olmasın? Bu, divsHTML'nin tamamında yeniden konumlandırılan tek 2'dir , bu nedenle bu küçük değişiklik için 2 ana sayfa aşırı doldurulmuştur.

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 farklı alt sitelerde daha fazla veya daha az gezinme öğesi olabileceğinden dinamik yüksekliği vardır.

Mutlak konumlandırılmış elemanların akıştan çıkarıldığını, böylece diğer elemanlar tarafından göz ardı edildiğini biliyorum. Ana div üzerinde
ayar denedim overflow:hidden;, ama bu yardımcı olmadı, ne de clearfix.

Benim son çare JavaScript divsbuna göre yeniden konumlandırmak için olacak , ama şimdilik bunu JavaScript olmayan bir yolu olup olmadığını görmek için çalışacağım.

Soruyu kendiniz cevapladınız: "Mutlak konumlandırılmış öğelerin akıştan kaldırıldığını, böylece diğer öğeler tarafından göz ardı edildiğini biliyorum." Böylece ebeveynlerin yüksekliğini kesinlikle konumlandırılmış bir öğeye göre ayarlayamazsınız.

Sabit yükseklikleri kullanırsınız veya JS'yi dahil etmeniz gerekir.

Bununla birlikte elemanlara uzanmak position: absolutemümkün olmasa da, genellikle aynı etkiyi elde ederken mutlak konumlandırmayı önleyebileceğiniz çözümler vardır. Özel durumunuzdaki sorunu çözen bu kemana bakın http://jsfiddle.net/gS9q7/

Hüner, her iki öğeyi de sağa, ikinciyi sola doğru kaydırarak öğe sırasını tersine çevirmektir, böylece ikincisi önce görünür.

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

Son olarak, ebeveyn için bir Clearfix eklemek ve (bkz bitirdiniz keman komple çözüm).

Genel olarak, mutlak konuma sahip öğe ana öğenin üstüne yerleştirildiği sürece, öğeyi yüzerek bir geçici çözüm bulma şansınız yüksektir.

Feeela haklı, ancakkonumlandırmanızıdivşu şekilde tersine çevirirseniz bir alt öğeye sözleşme yapan / genişletenbir üstöğe alabilirsinizdiv:

.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 */
}

Bu senin için işe yaramalı.

Bunu çözmenin oldukça basit bir yolu var.

Child1 ve child2 içeriğini display ile göreli div'lerde çoğaltmanız yeterlidir: üst div'de yok. Çocuk1_1 ve çocuk2_2 deyin. Alt2 alt2 ve alt alt1 alt yerleştirin.

Jquery'niz (veya herhangi bir şey) mutlak div çağırdığında, display: block AND visibility: hidden ile ilgili göreli div (child1_1 veya child2_2) ayarını yapmanız yeterlidir. Göreli çocuk hala görünmez olacak, ancak ebeveynin div'ini daha yüksek hale getirecektir.

Saf JavaScript ile, sadece sizin yüksekliğini almak gerekir static positionalt öğesi .child1kullanılarak getComputedStyle () olarak değerini almak sonra set yöntemi padding-topaynı çocuk için kullanan HTMLElement.style özelliği.

Yukarıda açıkladığım şeylere ilişkin pratik bir örnek için aşağıdaki Kod Parçacığı'nı kontrol edin ve çalıştırın :

/* 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>

Bu soru 2012 yılında flexbox'tan önce soruldu . Modern CSS kullanarak bu sorunu çözmenin doğru yolu bir medya sorgusu ve mobil cihazlar için esnek bir sütun tersine çevirmektir. Mutlak konumlandırma gerekmez.

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 top on mobile
    </p>
  </div>
</div>

CSS:

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

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

Benzer bir sorun yaşadım. Bunu çözmek için (gövde, belge veya pencereyi kullanarak iframe'in yüksekliğini hesaplamak yerine) tüm sayfa içeriğini saran bir div (örneğin id = "page" olan bir div) oluşturdum ve sonra yüksekliğini kullandım.

Sevmediğim ama işi bitiren başka bir çözüm buldum.

Temel olarak alt öğeleri, kopyalar görünmeyecek şekilde çoğaltın.

<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;
}

Bu alt öğeler küçük bir işaretleme içeriyorsa, etki küçük olacaktır.

"Ya sabit yükseklikler kullanıyorsunuz ya da JS'yi dahil etmeniz gerekiyor."

JS örneği:

---------- jQuery JS örneği --------------------

    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);

Bu sorunu çözen çok basit bir kesmek var

İşte çözümü gösteren bir kod kutusu: 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; }

Çocuğun kendini nerede konumlandırdığını etkilemek için hack div'in konumlandırması ile oynayabilirsiniz.

İşte bir pasaj:

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>

Bunu şimdi yapmanın daha iyi bir yolu var. Bottom özelliğini kullanabilirsiniz.

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

Bu @ChrisC'nin önerdiğine çok benzer. Mutlak konumlandırılmış bir eleman değil, göreceli bir eleman kullanır. Belki senin için çalışabilir

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

Ve css'iniz şöyle:

.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/

Ayrıca bir sonraki yaklaşımı da göz önünde bulundurun:

CSS:

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

Ayrıca div yeniden konumlandırmak için çalışıyoruz css ızgara düşünün

Mutlak statik (yerleştirilmemiş en yakın atası karşı konumunu belirlemeye kendilerini görüntüleyen position: staticbelirli bir ebeveyn karşı konumlandırılmış mutlak görünümü, set ebeveyn istemek nedenle eğer) positioniçin relativeve çocuk positioniçinabsolute

Bunu dene, benim için çalıştı

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

Çocuk yüksekliğini ebeveyn yüksekliğine ayarlayacaktır