it-swarm.com.de

Automatische Höhe des übergeordneten Containers mit absoluten/festen Kindern

Ich versuche, eine automatische Höhe ein div einzustellen, die 2 untergeordnete Elemente enthält, die fest und absolut respektiert werden.

Ich möchte, dass mein übergeordneter Container eine automatische Höhe hat, aber ich weiß, dass dies schwierig ist, da die untergeordneten Elemente mit ihren Positionen aus der Seitenstruktur entfernt werden.

Ich habe versucht, eine Höhe für mein übergeordnetes div festzulegen, die funktioniert, aber da mein Layout ansprechend ist, bleibt die Höhe bei der Verkleinerung auf Mobilgeräte dieselbe, bei der der Inhalt gestapelt wird. Die Höhe muss also mit den untergeordneten Elementen erhöht werden.

Ich bin mir nicht sicher, ob das Sinn macht, ich habe nicht meinen eigentlichen Code auf dem Computer, aber ich habe eine Geige gemacht, die versucht zu erklären ...

http://jsfiddle.net/dPCky/

31
Liam

Das übergeordnete div kann height:auto nicht verwenden, wenn seine untergeordneten Elemente absolut/fix positioniert sind.

Sie müssen JavaScript verwenden, um dies zu erreichen.

Ein Beispiel in jQuery:

var biggestHeight = 0;
// Loop through elements children to find & set the biggest height
$(".container *").each(function(){
 // If this elements height is bigger than the biggestHeight
 if ($(this).height() > biggestHeight ) {
   // Set the biggestHeight to this Height
   biggestHeight = $(this).height();
 }
});

// Set the container height
$(".container").height(biggestHeight);

Arbeitsbeispiel http://jsfiddle.net/blowsie/dPCky/1/

33
Blowsie

http://jsfiddle.net/dPCky/32/ - Ein ähnlicher Effekt mit float:left;

http://jsfiddle.net/dPCky/40/ - Ein noch näheres Ergebnis für Ihren gewünschten Effekt.

Wenn Sie bereit sind, Ihre HTML-Datei zu ändern, können Sie tun, was ich oben gemacht habe.

Ich habe die Positionierung aus den folgenden Tutorials gelernt, die ich jedem wärmstens empfehlen kann, der ein Positionierungsprofi in html/css werden möchte:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Ich würde generell vermeiden, Javascript zu verwenden, wenn dies möglich ist, wenn Sie etwas tun, das möglicherweise eine Korrektur auf CSS- oder HTML-Ebene hat, wenn Sie Ihre HTML-Datei anpassen möchten.

7
Anicho

Wenn Sie kein JavaScript verwenden möchten, können Sie diese Antwort auf https://stackoverflow.com/a/33788333/1272106 verweisen.

Kurzbeschreibung: Duplizieren Sie ein Element und legen Sie die Sichtbarkeit zum Ausblenden fest, um das übergeordnete Element zu erweitern. 

2
Ricky Jiao

Etwas spät zur Party, aber das kann jemandem helfen, da ich das Problem kürzlich ohne JS gelöst habe - WENN die Kinder ihr Seitenverhältnis beibehalten, während sie für mobile Geräte schrumpfen. Mein Beispiel bezieht sich auf das Anpassen einer jQuery.cycle-Diashow für den Kontext. Sie sind sich nicht sicher, ob Sie dies oben erreichen möchten, aber es waren absolut untergeordnete Objekte in einem Container mit 100% Seitenbreite für mobile und explizite Abmessungen auf größeren Bildschirmen.

Sie können die Höhe des übergeordneten Elements festlegen, um Viewport-Breiteneinheiten (vw) zu verwenden, sodass die Höhe relativ zur Breite des Geräts angepasst wird. Der Support ist heutzutage so breit, dass die meisten mobilen Geräte diese Geräte korrekt verwenden. Fehler und teilweise Unterstützung beziehen sich nicht auf vw (sondern eher auf vmin und vmax in IE). Nur Opera Mini ist im Dunkeln.

Ohne zu wissen, was die Kinder in diesem Beispiel zwischen den reagierenden Punkten tun (das jsfiddle hat explizite Höhen festgelegt), nehmen wir an, dass die Höhe der Kinder relativ zur Gerätebreite vorhersagbar verkleinert wird, sodass Sie die Höhe basierend auf dem Aspekt ziemlich genau annehmen können Verhältnis.

.container{ height: 75vw; }

http://caniuse.com/#feat=viewport-units

Beachten Sie das bekannte Problem Nr. 7 auf caniuse, wenn Sie 100VW als Breitenmaß verwenden möchten, aber hier spielen wir mit der Höhe!

2
Shale

Genießen Sie diese automatische Höhe für Container, die sich an jedes Gerät und die Größe oder Drehung des Ansichtsfensters anpassen lassen.

Es wurde getestet mit float, Inline-Block, Absolut, Rändern und Auffüllen auf die untergeordneten Elemente.

<div class="autoheight" style="background: blue">
    <div style="position: absolute; width: 33.3%; background: red">
    Only
        <div style="background: green">
        First level elements are measured as expected
        </div>
    </div>
    <div style="float:left; width: 33.3%; background: red">
    One Two Three Four Five Six Seven Eight Night Ten
    </div>
    <div style="float:left; width: 33.3%; background: red">
    One Two Three Four Five Six
    </div>
</div>

<script>
function processAutoheight()
{
    var maxHeight = 0;

    // This will check first level children ONLY as intended.
    $(".autoheight > *").each(function(){

        height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total
        if (height > maxHeight ) {
            maxHeight = height;
        }
    });

    $(".autoheight").height(maxHeight);
}

// Recalculate under any condition that the viewport dimension has changed
$(document).ready(function() {

    $(window).resize(function() { processAutoheight(); });

    // BOTH were required to work on any device "document" and "window".
    // I don't know if newer jQuery versions fixed this issue for any device.
    $(document).resize(function() { processAutoheight(); });

    // First processing when document is ready
    processAutoheight();
});
</script>
1
Heroselohim

Der richtige Weg ... einfach. Kein Javascript.

<div class="container">
    <div class="faq-cards">    
      <div class="faq-cards__card">Im A Card</div>
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div> 
      <div class="faq-cards__card">Im A Card</div>
    </div>
</div>

.container { 
 height:auto;
 width: 1280px;
 margin:auto;
 background: #CCC;
}
.faq-cards { 
 display:flex;
 flex-wrap:wrap;
 justify-content: center;
 position:relative;
 bottom:40px;
 height:auto;
}
.faq-cards__card {
  margin:10px;
  position:relative;
  width:225px;
  background: beige;
  height: 100px;
  padding:10px;
  text-align: center;
}

https://codepen.io/GerdSuhr/pen/jgqOJp

1
Foobar

In Verbindung mit der Antwort von @ Blowsie:

/**
 * Sets the height of a container to its maximum height of its children. This
 * method is required in case
 * 
 * @param selector jQuery selector
 */
function setHeightByChildrenHeight(selector)
{
    $(selector).each(function()
    {
        var height = 0;

        $(this).children("*").each(function()
        {
            height = Math.max(height, $(this).height());
        });

        $(this).height(height);
    });
};
0
djmj