wake-up-neo.com

Wie kann ich ein schwebendes DIV erzwingen, damit es der Höhe eines anderen schwebenden DIV entspricht?

Mein HTML-Code teilt die Seiten in zwei Spalten auf: 65% bzw. 35%.

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div> 

In der responsediv habe ich variable Daten; in der notediv habe ich feste Daten. Obwohl die beiden divs zwei unterschiedliche Datensätze haben, brauche ich, dass sie mit der gleichen Höhe angezeigt werden, damit die Hintergrundfarben ein Kästchen mit beiden zu füllen scheinen. Das Problem ist natürlich die Variable responsediv, da ihre Höhe von der aktuell angezeigten Datenmenge abhängt.

Wie kann ich sicherstellen, dass die Höhe der beiden Säulen immer gleich ist?

67
venkatachalam

Wickeln Sie sie in ein umfassendes div mit der darauf angewendeten Hintergrundfarbe ein. Nach den 'Spalten' wird ein div-Wert angezeigt.

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

Aktualisiert, um einige Kommentare und meine eigenen Gedanken anzusprechen:

Diese Methode funktioniert, weil sie im Wesentlichen eine Vereinfachung Ihres Problems darstellt. In dieser etwas "oldskool" -Methode füge ich zwei Spalten ein, gefolgt von einem leeren Clearing-Element. Die Aufgabe des Clearing-Elements besteht darin, dem übergeordneten Element (mit dem Hintergrund) zu sagen, wo sich dies befindet Floating-Verhalten beendet. Dies ermöglicht dem übergeordneten Element, im Wesentlichen 0 Pixel der Höhe an der Position des Löschvorgangs wiederzugeben. Dies ist das, was auch immer das höchste Floating-Element ist.

Der Grund dafür ist, sicherzustellen, dass das übergeordnete Element so groß wie die höchste Spalte ist. Der Hintergrund wird dann auf das übergeordnete Element gesetzt, um den Anschein zu erwecken, dass beide Spalten die gleiche Höhe haben.

Es sollte beachtet werden, dass diese Technik "oldskool" ist, da es besser ist, dieses Verhalten für die Höhenberechnung mit etwas wie clearfix auszulösen, oder indem einfach überlauf: im übergeordneten Element verborgen wird.

Während dies in diesem eingeschränkten Szenario funktioniert, wenn Sie möchten, dass jede Spalte optisch unterschiedlich aussieht oder eine Lücke zwischen ihnen besteht, funktioniert das Festlegen eines Hintergrunds für das übergeordnete Element nicht. Es gibt jedoch einen Trick, um diesen Effekt zu erzielen.

Der Trick besteht darin, alle Spalten mit der unteren Auffüllung auf die maximale Größe zu erweitern, die Sie erwarten. Dies kann der Unterschied zwischen der kürzesten und der höchsten Spalte sein. Wenn Sie dies nicht berechnen können, wählen Sie eine große Zahl aus, die Sie hinzufügen müssen ein negativer unterer Rand der gleichen Zahl.

Sie müssen für das übergeordnete Objekt einen ausgeblendeten Überlauf haben. Das Ergebnis ist jedoch, dass jede Spalte diese zusätzliche Höhe, die vom Rand vorgeschlagen wird, wiedergibt, nicht jedoch das Layout dieser Größe (das negative Ergebnis widerspricht der Berechnung). 

Dadurch wird das übergeordnete Element mit der Größe der höchsten Spalte gerendert, während alle Spalten auf ihrer Höhe + der Größe des verwendeten unteren Abstandes gerendert werden können. Wenn diese Höhe größer ist als das übergeordnete Element, wird der Rest einfach abgeschnitten.

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

Ein Beispiel für diese Technik finden Sie auf der Website von bowers und wilkins (siehe die vier horizontalen Spotlight-Bilder unten auf der Seite).

100
meandmycode

Wenn Sie versuchen, ein gleitendes div zu einem anderen zu zwingen, um einen Spalteneffekt zu erzeugen, mache ich dies. Ich mag es, weil es einfach und sauber ist.

<div style="background-color: #CCC; width:300px; overflow:hidden; ">
    <!-- Padding-Bottom is equal to 100% of the container's size, Margin-bottom hides everything beyond
         the container equal to the container size. This allows the column to grow with the largest
         column. -->
    <div style="float: left;width: 100px; background:yellow; padding-bottom:100%; margin-bottom:-100%;">column a</div>
    <div style="float: left;width: 100px;  background:#09F;">column b<br />Line 2<br />Line 3<br />Line 4<br />Line 5</div>
    <div style="float:left; width:100px; background: yellow; padding-bottom:100%; margin-bottom:-100%;">Column C</div>
    <div style="clear: both;"></div>
</div>

Ich denke das macht Sinn. Es scheint auch bei dynamischen Inhalten gut zu funktionieren.

38
Dyson

Hier ist ein jQuery-Plugin , um die Höhe mehrerer Divs gleich einzustellen. Und unten ist der eigentliche Code des Plugins.

$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
    if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        });
    if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
        $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};
15
Justin Yost

Die richtige Lösung für dieses Problem ist die Verwendung von display: table-cell

Wichtig: Diese Lösung benötigt keine float, da table-cell die div bereits in ein Element verwandelt, das sich mit den anderen in demselben Container befindet. Das bedeutet auch, dass Sie sich keine Sorgen um das Löschen von Floats, Überlauf, Hintergrund und all die anderen bösen Überraschungen machen müssen, die der float-Hack mit auf die Party bringt.

CSS:

.container {
  display: table;
}
.column {
  display: table-cell;
  width: 100px;
}

HTML:

<div class="container">
    <div class="column">Column 1.</div>
    <div class="column">Column 2 is a bit longer.</div>
    <div class="column">Column 3 is longer with lots of text in it.</div>
</div>

Verbunden:

9
Aaron Digulla

Sie sollten sie in ein div ohne Float einwickeln.

<div style="float:none;background:#FDD017;" class="clearfix">
    <div id="response" style="float:left; width:65%;">Response with two lines</div>
    <div id="note" style="float:left; width:35%;">single line note</div>
</div>

Ich verwende auch den Clearfix-Patch hier http://www.webtoolkit.info/css-clearfix.html

6
bendewey

Ich kann nicht verstehen, warum dieses Problem in den Boden gerammt wird, wenn Sie in 30 Sekunden eine zweispaltige Tabelle codieren und das Problem lösen können.

Dieses div-Spaltenhöhenproblem tritt in einem typischen Layout auf. Warum sollten Sie auf Scripting zurückgreifen, wenn dies mit einem einfachen alten HTML-Tag erledigt wird? Wenn nicht große und zahlreiche Tabellen in einem Layout vorhanden sind, werde ich nicht der Ansicht, dass Tabellen wesentlich langsamer sind.

4
Erich Richter

Flex macht dies standardmäßig.

<div id="flex">
 <div id="response">
 </div> 
 <div id="note">
 </div>
</div>   

CSS: 

#flex{display:flex}
#response{width:65%}
#note{width:35%}

https://jsfiddle.net/784pnojq/1/

BONUS: mehrere Reihen

https://jsfiddle.net/784pnojq/2/

1
Nick Manning

Mit diesem Code können Sie eine variable Anzahl von Zeilen (mit einer variablen Anzahl von DIVs in jeder Zeile) haben und alle DIVs in jeder Zeile an die Höhe ihres größten Nachbarn anpassen:

Wenn wir davon ausgehen, dass alle DIVs, die gleiten, sich in einem Container mit der id "divContainer" befinden, könnten Sie Folgendes verwenden:

$(document).ready(function() {

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

$('div#divContainer div').each(function(index) {

    if(currentRowStart != $(this).position().top) {

        // we just came to a new row.  Set all the heights on the completed row
        for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

        // set the variables for the new row
        rowDivs.length = 0; // empty the array
        currentRowStart = $(this).position().top;
        currentTallest = $(this).height();
        rowDivs.Push($(this));

    } else {

        // another div on the current row.  Add it to the list and check if it's taller
        rowDivs.Push($(this));
        currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);

    }
    // do the last row
    for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

});
});
0

Sie können jederzeit auch ein Hintergrundbild verwenden. Ich neige dazu, zu 100% für diese Option zu stimmen, da die einzig perfekte Lösung die Option Jquery ist.

Wie bei der Verwendung des äußeren div mit einer Hintergrundfarbe müssen Sie den Inhalt in beiden divs auf dieselbe Höhe bringen.

0
Drew

Da das gleiche Problem bestand und drei Divs nebeneinander mit unterschiedlichem Inhalt erforderlich waren, deren rechte Grenzen "getrennt" wurden, funktionierte die einzige Lösung in einer anderen Antwort in einer leicht modifizierten Version der Option jQuery. Denken Sie daran, dass das Skript hier gefunden werden muss.

Nachfolgend finden Sie meine etwas modifizierte Version des Skripts, die nur eine echte Min-Höheneinstellung zulässt (da meine Boxen mindestens eine bestimmte Höhe haben mussten).

/*--------------------------------------------------------------------
 * JQuery Plugin: "EqualHeights"
 * by:    Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2008 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description:   Compares the heights or widths of the top-level children of a provided element
                  and sets their min-height to the tallest height (or width to widest width). Sets in em units
                  by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method    (article:
                  http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
 * Usage Example: $(element).equalHeights();
                  Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
                  Optional: to specify an actual min-height (in px), pass an integer value, regardless of previous parameter: $(element).equalHeights(false,150);
 * Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/

$.fn.equalHeights = function(px,minheightval) {
    $(this).each(function(){
        if (minheightval != undefined) { 
            var currentTallest = minheightval;    
        } 
        else { 
            var currentTallest = 0;
        }
        $(this).children().each(function(i){
            if ($(this).height() > currentTallest) { 
                currentTallest = $(this).height();
            }
        });
        if (!px || !Number.prototype.pxToEm) 
            currentTallest = currentTallest.pxToEm(); //Use ems unless px is specified.
        // For Internet Explorer 6, set height since min-height isn't supported.
        if ($.browser.msie && $.browser.version == 6.0) { 
            $(this).children().css({'height': currentTallest});
        }
        $(this).children().css({'min-height': currentTallest});
    });
    return this;
};

Es funktioniert wie ein Zauber und verlangsamt nichts :)

0
David

Ich empfehle Ihnen, beide in einem äußeren Div mit der gewünschten Hintergrundfarbe einzuwickeln.

0
chaos