HTML / CSS: Zwei schwebende Divs auf die gleiche Höhe bringen

106

Ich habe ein kleines besonderes Problem, das ich derzeit mit einem löse table, siehe unten. Grundsätzlich möchte ich, dass zwei Divs 100% der verfügbaren Breite einnehmen, aber nur so viel vertikalen Raum wie nötig einnehmen (was auf dem Bild nicht wirklich so offensichtlich ist). Die beiden sollten immer genau die gleiche Höhe haben, mit einer kleinen Linie dazwischen, wie gezeigt.

Alt-Text
(Quelle: pici.se )

Das ist alles sehr einfach zu machen table, was ich gerade mache. Ich bin jedoch nicht besonders an der Lösung interessiert, da dies semantisch gesehen eigentlich keine Tabelle ist.

html  css  html-table 
— Deniz Dogan
quelle
2
Äh ... wo ist das Bild? Ich weiß, dass ich zu spät bin, um dies zu kommentieren
— Ajay Kulkarni
— DidThis

Antworten:

160

Sie können Spalten gleicher Höhe in CSS erhalten, indem Sie den unteren Abstand einer großen Menge, den unteren negativen Rand derselben Menge anwenden und die Spalten mit einem Div umgeben, dessen Überlauf ausgeblendet ist. Das vertikale Zentrieren des Textes ist etwas schwieriger, aber dies sollte Ihnen auf dem Weg helfen.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>
Erweitern Sie das Snippet

Ich denke, das ist erwähnenswert Die vorherige Antwort von streetpc hat ungültiges HTML, der Doctype ist XHTML und es gibt einfache Anführungszeichen um die Attribute. Bemerkenswert ist auch dasSie benötigen kein zusätzliches Element mit clearon, um die internen Schwimmer des Containers zu löschen. Wenn Sie einen versteckten Überlauf verwenden, werden die Floats in allen Nicht-IE-Browsern gelöscht. Wenn Sie dann nur etwas hinzufügen, um hasLayout wie width oder zoom: 1 zu erhalten, wird der IE seine internen Floats löschen.

Ich habe dies in allen modernen Browsern FF3 + Opera9 + Chrome Safari 3+ und IE6 / 7/8 getestet. Es mag wie ein hässlicher Trick erscheinen, aber es funktioniert gut und ich benutze es oft in der Produktion.

Ich hoffe das hilft.

— Natalie Downe
quelle
1
Der Code, den ich gegeben habe, wird beim Validator von W3C validiert (nun, sobald Sie ein <title> -Element hinzugefügt haben, was nicht Ihr Punkt war). Darüber hinaus erlauben die Spezifikationen die Verwendung von einfachen Anführungszeichen gemäß dieser Diskussion: sitepoint.com/forums/showthread.php?t=54273#6
— Instanz von mir
1
Entschuldigung, mein Fehler. Ich habe meine Antwort oben geändert. Beachten Sie jedoch, dass bei Ihrer Methode, wenn die rechte Spalte größer als die linke wird, das Rot darunter durchscheint, da die beiden Felder nicht genau die richtige Höhe haben. Je nach Design würde ich mich entweder für künstliche Säulen oder diese Methode mit den unteren Rändern und der Polsterung entscheiden.
— Natalie Downe
2
Während die von Kevin C. gegebene Lösung zum Abschneiden von Schatten für die obere, linke und rechte Polsterung funktioniert, funktioniert sie für die untere nicht. Ich habe bisher keine Lösung gefunden.
— JeanMertz
1
Gute Arbeit Natalie. @laarsk Unvorhersehbare Höhe ist genau das, wofür das ist, nicht wahr? Siehe Demo: jsfiddle.net/RT3MT/4 Verschieben Sie die "längeren" Absätze, um zu sehen
— jpillora
1
Dies ist einer der hässlichsten CSS-Hacks, die ich je gesehen habe, aber ich werde ihn mit offenen Armen annehmen, lol. Es scheint der einzige Weg nach vorne zu sein
— Matt Vukas
98

Es ist Jahr 2012 + n, also wenn Sie nicht mehr kümmern sich um IE6 / 7, display:table, display:table-rowund display:table-cellArbeit in allen modernen Browsern:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Update 17.06.2016: Wenn Sie der Meinung sind, dass die Zeit dafür gekommen ist display:flex, schauen Sie sich Flexbox Froggy an .

— Dmitry Leskov
quelle
30
In welchem ​​Jahr wird diese Antwort ersetzt display: flex?
— LandonSchropp
12
Nein, wir sind jetzt im Jahr 2014 (;
— Francisco Presencia
9
aaaaaaund es ist 2015, vielleicht bis Ende des Jahres können wir die Antwort ändern, um anzuzeigen: flex :)
— MetalWeirdo
5
Ich lebe immer noch in den 1950ern.
— Jay
1
Hallo ab 2016! Wir können jetzt Flex verwenden
— Brett Gregson
20

Sie sollten Flexbox verwenden, um dies zu erreichen. Es wird in IE8 und IE9 nicht unterstützt und nur mit dem Präfix -ms in IE10, aber alle anderen Browser unterstützen es. Für Herstellerpräfixe sollten Sie auch Autoprefixer verwenden .

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}
— Luca Steeb
quelle
1
Das Problem, das ich mit Flex habe, ist, dass es einen Wrapper um die Spalten benötigt. Mit der Floats + Display: Table-Technik kann ich zB einen Header und eine Reihe von Spalten haben und der Effekt wirkt sich auf die Spalten aus, ohne den Header zu beeinflussen.
— Stijn de Witt
10

Sie können dies mit js zum Laufen bringen:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
— Andi P. Trix
quelle
1
Bitte beachten Sie, dass diese Frage bereits ziemlich alt ist und bereits bessere Lösungen (ohne Javascript) bereitgestellt wurden.
— Nirazul
1
Ich mag diese Lösung wirklich. Es macht Spaß und zeigt, dass Sie nicht nur Ihr HTML mit CSS manipulieren können, sondern es auch mit Hilfe von jquery
— csichar
6
Diese Lösung funktioniert nicht, wenn sich die Höhe der Spalten ändert. Dies kann passieren, wenn der Inhalt der Spalten geändert wird. Diese Funktion müsste ausgeführt werden: bei Änderung des Inhalts und Größenänderung des Browsers. Der CSS-Ansatz ist idealer, da er diese Bedenken vermeidet
— Alexreardon
5

Dies ist ein klassisches Problem in CSS. Dafür gibt es keine wirkliche Lösung.

Dieser Artikel von A List Apart ist eine gute Lektüre zu diesem Problem. Es wird eine Technik namens "Faux Columns" verwendet, die darauf basiert, dass ein vertikal gekacheltes Hintergrundbild auf dem Element mit den Spalten vorhanden ist , wodurch die Illusion von Spalten gleicher Länge entsteht. Da es sich auf dem Wrapper der schwebenden Elemente befindet, ist es so lang wie das längste Element.

Die A List Apart-Redakteure haben diesen Hinweis zum Artikel:

Ein Hinweis der Redaktion: Obwohl dieser Artikel für seine Zeit ausgezeichnet ist, spiegelt er möglicherweise nicht die modernen Best Practices wider.

Die Technik erfordert vollständig statische Breitenentwürfe, die mit den Flüssigkeitslayouts und reaktionsschnellen Entwurfstechniken, die heutzutage für geräteübergreifende Standorte beliebt sind, nicht gut funktionieren. Für Standorte mit statischer Breite ist dies jedoch eine zuverlässige Option.

— Philippe Leybaert
quelle
Danke, das scheint ein netter Hack zu sein. Ich habe jedoch vergessen zu erwähnen, dass die rechte Spalte vertikal zentrierten Text enthalten sollte. Habe ich Recht zu glauben, dass künstliche Säulen dies nicht können?
— Deniz Dogan
4

Ich hatte ein ähnliches Problem und meiner Meinung nach ist es die beste Option, nur ein wenig Javascript oder JQuery zu verwenden.

Sie können gewünschte Divs auf die gleiche Höhe bringen, indem Sie den höchsten Div-Wert erhalten und diesen Wert auf alle anderen Divs anwenden. Wenn Sie viele Divs und viele Lösungen haben, schlage ich vor, wenig fortgeschrittenen js-Code zu schreiben, um herauszufinden, welcher der Divs der höchste ist, und dann seinen Wert zu verwenden.

Mit jquery und 2 divs ist es sehr einfach, hier ist Beispielcode:

$('.smaller-div').css('height',$('.higher-div').css('height'));

Und zum Schluss gibt es noch eine letzte Sache. Ihre Polsterung (oben und unten) muss gleich sein! Wenn Sie eine größere Polsterung haben, müssen Sie den Polsterungsunterschied beseitigen.

— Herr Br
quelle
1

Soweit ich weiß, können Sie dies mit aktuellen CSS-Implementierungen nicht tun. Um zwei Spalten mit gleicher Höhe zu erstellen, benötigen Sie JS.

— Calin Don
quelle
1

Dies funktioniert bei mir in IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).

Funktioniert auch in IE 6, wenn Sie das klarere Div unten auskommentieren. Bearbeiten : wie Natalie Downe sagte, können Sie fügen Sie einfach width: 100%;auf , #containerstatt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

Ich kenne keine CSS-Methode, um den Text vertikal im rechten Div zu zentrieren, wenn das Div keine feste Höhe hat. Wenn dies line-heightder Fall ist, können Sie den Wert auf den gleichen Wert wie die Div-Höhe setzen und ein inneres Div mit Ihrem Text einfügen display: inline; line-height: 110%.

— Instanz von mir
quelle
1

Mit Javascript können Sie die beiden div-Tags auf dieselbe Höhe bringen. Das kleinere div wird mit dem folgenden Code auf die gleiche Höhe wie das höchste div-Tag eingestellt: 

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

Mit "left" und "right" sind die IDs der div-Tags.

— Quintox303
quelle
1

Mit der CSS-Eigenschaft -> display: table-cell

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>
Erweitern Sie das Snippet

0

Verwenden Sie mit JS data-same-height="group_name"alle Elemente, die dieselbe Höhe haben sollen .

Das Beispiel: https://jsfiddle.net/eoom2b82/

Der Code:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});
— Wiliam
quelle
0

Ich musste etwas Ähnliches tun, hier ist meine Implementierung. Um den Zweck zusammenzufassen, müssen zwei Elemente die Breite eines bestimmten übergeordneten Containers einnehmen und die Höhe nur so hoch sein, wie sie sein muss. Im Wesentlichen entspricht die Höhe der maximalen Höhe der größten Menge an Inhalt, der andere Behälter ist jedoch bündig.

html

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

CSS

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}
— dieser Typ
quelle
0

Vor einigen Jahren löste die floatEigenschaft dieses Problem mit dem tableAnsatz display: table;und display: table-row;unddisplay: table-cell; .

Aber jetzt mit der flex-Eigenschaft können Sie es mit 3 Codezeilen lösen: display: flex;und flex-wrap: wrap;undflex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50%sind die flexWerte, die wir gegeben haben: flex-grow flex-shrink flex-basisjeweils. Es ist eine relativ neue Verknüpfung in Flexbox, um zu vermeiden, dass sie einzeln eingegeben werden. Ich hoffe das hilft jemandem da draußen

— Fouad Boukredine
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.