it-swarm.com.de

Wie kann man erzwingen, dass das untergeordnete div 100% der Höhe des übergeordneten div beträgt, ohne die Höhe des übergeordneten Elements anzugeben?

Ich habe eine Site mit folgender Struktur:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Die Navigation befindet sich auf der linken Seite und der Inhalt div befindet sich auf der rechten Seite. Die Informationen für das content div werden über PHP abgerufen und sind daher jedes Mal anders.

Wie kann ich die Navigation vertikal skalieren, sodass ihre Höhe der Höhe des Content div entspricht, unabhängig davon, welche Seite geladen wird?

456
user137726

NOTE: Diese Antwort gilt für ältere Browser ohne Unterstützung des Flexbox-Standards. Für einen modernen Ansatz siehe: https://stackoverflow.com/a/23300532/1155721


Ich schlage vor, Sie werfen einen Blick auf Gleiche Höhe-Spalten mit Cross-Browser-CSS und No Hacks .

Grundsätzlich ist dies mit einem Browser-kompatiblen CSS-Modus nicht trivial (bei Tabellen aber trivial). Finden Sie sich also eine geeignete vorgefertigte Lösung.

Die Antwort hängt auch davon ab, ob Sie eine Höhe von 100% oder eine gleiche Höhe wünschen. Normalerweise ist es gleich groß. Bei einer Höhe von 100% ist die Antwort etwas anders.

144
cletus

Für die Eltern:

display: flex;

Sie sollten einige Präfixe hinzufügen, http://css-tricks.com/using-flexbox/ .

Edit: Wie @Adam Garner bemerkt hat, align-items: stretch; wird nicht gebraucht. Seine Verwendung ist auch für Eltern, nicht für Kinder. Wenn Sie die Dehnung von Kindern definieren möchten, verwenden Sie align-self.

.parent {
  height: 150px;
  background: red;
  padding: 10px;
  display:flex;
}

.child {  
  width: 100px;
  background: blue;
}
<div class="parent">
  <div class="child"></div>
</div>

492
Aiphee

Dies ist ein frustrierendes Thema, das sich ständig mit Designern befasst. Der Trick ist, dass Sie die Höhe für BODY und HTML in Ihrem CSS auf 100% setzen müssen.

html,body {
    height:100%;
}

Dieser scheinbar sinnlose Code definiert dem Browser, was 100% bedeutet. Frustrierend, ja, aber der einfachste Weg.

96
Travis

Ich finde, dass die Einstellung der beiden Spalten auf display: table-cell; anstelle von float: left; gut funktioniert.

92
Paul Harvey

Wenn Sie nichts dagegen haben, dass der Navigationsdatensatz im Falle eines unerwartet kurzen Inhaltsdatums abgeschnitten wird, gibt es mindestens einen einfachen Weg:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Ansonsten gibt es die Faux-Column Technik.

53
David Thomas
#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
30
Roman Kuntyi

jQuery verwenden:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});
15
flavius

Machen Sie den unteren Rand zu 100%.

margin-bottom: 100%;
11
Tony C
#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Schauen Sie sich dieses Beispiel an.

10
Sergiu

height : <percent> funktioniert nur, wenn Sie alle übergeordneten Knoten mit einer bestimmten Prozenthöhe und einer festen Höhe in Pixel, Ems usw. auf oberster Ebene haben. Auf diese Weise wird die Höhe an Ihr Element angepasst.

Sie können 100% für HTML- und Body-Elemente angeben, wie von @Travis zuvor angegeben, um die Seitenhöhe auf Ihre Knoten herunterzustufen.

8
Lajos Meszaros

Nach langem Suchen und Ausprobieren wurde nichts gelöst, außer

style = "height:100%;"

auf die Kinder div

und für Eltern wenden Sie dies an

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

außerdem benutze ich bootstrap und dies hat das responsive für mich nicht beschädigt.

7
Hakam Fostok

Basierend auf der in diesem article beschriebenen Methode habe ich .Less dynamische Lösung erstellt:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Weniger:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}
6
Dmitry

In einem RWD-Projekt wäre es am besten, jQuery zu verwenden. Für einen kleinen Bildschirm möchten Sie wahrscheinlich die Höhe automatisch beibehalten, da col1, col2 und col3 aufeinander gestapelt sind.

Nach einem Haltepunkt für eine Medienabfrage möchten Sie jedoch, dass Spalten mit gleicher Höhe für alle Spalten nebeneinander angezeigt werden. 

1125 px ist nur ein Beispiel für den Haltepunkt der Fensterbreite, nach dem Sie alle Spalten auf die gleiche Höhe setzen möchten.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

Sie können natürlich weitere Haltepunkte festlegen, wenn Sie dies benötigen. 

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            if (window.innerWidth>= 1125) {
              $('.col1').height($('.wraper').height());
              $('.col2').height($('.wraper').height());
              $('.col3').height($('.wraper').height());
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>
2
DevWL

Ich weiß, es war eine lange Zeit, seit die Frage gestellt wurde, aber ich fand eine einfache Lösung und dachte, jemand könnte sie verwenden (Entschuldigung für das schlechte Englisch). Hier kommt's:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

Einfaches Beispiel. Beachten Sie, dass Sie sich in Reaktionsfähigkeit umwandeln können.

2
Paula Fleck

Fügen Sie dem übergeordneten Code display: grid hinzu

2
Dziamid

Meine Lösung:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});
2

Sie verwenden CSS Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

1
Ini

Ich hatte das gleiche Problem, es funktionierte basierend auf Hakam Fostoks Antwort. Ich habe ein kleines Beispiel erstellt. In einigen Fällen könnte es funktionieren, ohne dass display: flex; und flex-direction: column; im übergeordneten Container hinzugefügt werden müssen

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

1
Builo

das position: absolute; dem Kind geben, das in meinem Fall gearbeitet hat

1
neoDev

[Verweist auf den weniger Code von Dmity in einer anderen Antwort] Ich vermute, dass dies eine Art "Pseudo-Code" ist?

Nach allem, was ich verstehe, probiere die Faux-Column-Technik, die den Trick ausführen sollte.

http://www.alistapart.com/articles/fauxcolumns/

Hoffe das hilft :)

1
jluna

Im Titel der Frage und im Inhalt gibt es einen gewissen Widerspruch. Der Titel spricht von einem übergeordneten Div, aber die Frage lässt es so aussehen, als wollten zwei gleichgeordnete Divs (Navigation und Inhalt) dieselbe Höhe haben.

Möchten Sie (a), dass Navigation und Inhalt zu 100% der Höhe des Hauptbereichs entsprechen, oder (b) möchten, dass Navigation und Inhalt dieselbe Höhe haben?

Ich gehe davon aus (b) ... Wenn dies der Fall ist, glaube ich nicht, dass Sie dies angesichts Ihrer aktuellen Seitenstruktur tun werden (zumindest nicht mit reinem CSS und ohne Scripting). Sie müssten wahrscheinlich etwas tun wie:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

stellen Sie den Inhalt div so ein, dass er einen linken Rand mit der Breite des Navigationsbereichs hat. Auf diese Weise befindet sich der Inhalt des Inhalts rechts von der Navigation, und Sie können das Navigationsdivit auf 100% der Höhe des Inhalts einstellen.

BEARBEITEN: Ich mache das komplett in meinem Kopf, aber Sie müssen wahrscheinlich auch den linken Rand des Navigationsdiveaus auf einen negativen Wert setzen oder den absoluten Wert auf 0 setzen, um ihn ganz nach links zu verschieben. Das Problem ist, es gibt viele Möglichkeiten, dies zu erreichen, aber nicht alle werden mit allen Browsern kompatibel sein.

1
Paul Abbott

Dieser Trick funktioniert: Hinzufügen eines abschließenden Elements in Ihrem HTML-Abschnitt mit einem Stil von klar: beide;

    <div style="clear:both;"></div>

Alles vorher wird in die Höhe aufgenommen.

1
user945389
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

Von:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

gibt Bootstrap an, aber Sie benötigen Bootstrap nicht, um dies zu verwenden. Die Beantwortung dieser alten Frage, da diese für mich funktionierte, scheint ziemlich einfach zu sein. 

Dies war die gleiche Antwort, die ich auf diese Frage gegeben habe Frage

0
eaglei22

Wie bereits erwähnt, ist Flexbox die einfachste. 

#main{ display: flex; align-items:center;}

dadurch werden alle untergeordneten Elemente auf die Mitte innerhalb des übergeordneten Elements ausgerichtet.

0
Chandan Purohit

Hier eine alte Mode-Demo basierend auf position: absolute des Inhaltscontainers und position: relative des übergeordneten Containers.

Demo

Was die moderne Vorgehensweise angeht, sind flex-Boxen die besten.

0
WebBrother