HTML / CSS: fare due div galleggianti della stessa altezza
https://stackoverflow.com/questions/1205159
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho un piccolo problema peculiare che attualmente risolvo usando una tabella , vedi sotto. Fondamentalmente, voglio che due div occupino il 100% della larghezza disponibile, ma occupino solo lo spazio verticale necessario (che non è poi così ovvio dall'immagine). I due dovrebbero avere sempre la stessa altezza esatta con una piccola linea tra loro, come mostrato.
(fonte: pici.se )
Questo è tutto molto facile da fare usando table , che sto attualmente facendo. Tuttavia, non sono troppo appassionato della soluzione, poiché semanticamente questa non è in realtà una tabella.
Soluzione
Puoi ottenere colonne di uguale altezza nei CSS applicando un'imbottitura inferiore di una grande quantità, un margine negativo inferiore della stessa quantità e circondando le colonne con un div che ha nascosto l'overflow. Centrare verticalmente il testo è un po 'più complicato, ma questo ti dovrebbe aiutare lungo la strada.
#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>
Penso che valga la pena ricordare che la risposta precedente di streetpc ha HTML non valido, il tipo di documento è XHTML e ci sono virgolette singole attorno agli attributi. Vale anche la pena notare che non è necessario un elemento aggiuntivo con clear per cancellare i float interni del contenitore. Se usi l'overflow nascosto, questo cancella i float in tutti i browser non IE e poi semplicemente aggiungendo qualcosa per dare hasLayout come larghezza o zoom: 1 farà sì che IE cancelli i suoi float interni.
L'ho provato in tutti i browser moderni FF3 + Opera9 + Chrome Safari 3+ e IE6 / 7/8. Può sembrare un brutto trucco ma funziona bene e lo uso molto in produzione.
Spero che questo aiuti.
Altri suggerimenti
È l'anno 2012 + n, quindi se non ti interessa più di IE6 / 7, display: table , display: table-row e display: table-cell funziona in tutti i browser moderni:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
Aggiornamento 17/06/2016: Se pensi che sia giunto il momento per display: flex , controlla Flexbox Froggy .
Dovresti usare flexbox per raggiungere questo obiettivo. Non è supportato in IE8 e IE9 e solo con il prefisso -ms in IE10, ma tutti gli altri browser lo supportano. Per i prefissi dei fornitori, dovresti anche utilizzare autoprefixer .
.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.
}
puoi farlo funzionare con js:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
Questo è un problema classico nei CSS. Non c'è davvero una soluzione per questo.
Questo articolo di A List Apart è una buona lettura di questo problema. Utilizza una tecnica chiamata "finte colonne", basata sull'avere un'immagine di sfondo affiancata verticalmente sull'elemento contenente le colonne che crea l'illusione di colonne di uguale lunghezza. Dal momento che si trova sul wrapper degli elementi mobili, è lungo quanto l'elemento più lungo.
Gli editori di A List Apart hanno questa nota sull'articolo:
Una nota degli editori: anche se eccellente per i suoi tempi, questo articolo potrebbe non riflettere le migliori pratiche moderne.
La tecnica richiede progetti di larghezza completamente statici che non funzionano bene con i layout dei liquidi e le tecniche di progettazione reattiva oggi popolari per i siti cross-device. Per i siti con larghezza statica, tuttavia, è un'opzione affidabile.
Ho avuto un problema simile e secondo me l'opzione migliore è usare solo un po 'di javascript o jquery.
Puoi ottenere che i div desiderati abbiano la stessa altezza ottenendo il valore div più alto e applicando quel valore a tutti gli altri div. Se hai molti div e molte soluzioni ti suggerisco di scrivere poco codice js in anticipo per scoprire quale di tutti i div è il più alto e quindi usare il suo valore.
Con jquery e 2 div è molto semplice, ecco un esempio di codice:
. $ ( 'minore div ') css (' altezza', $ () css ( 'height ')' superiore div..');
E per la fine, c'è un'ultima cosa. La loro imbottitura (superiore e inferiore) deve essere la stessa! Se uno ha un'imbottitura più grande, è necessario eliminare la differenza di imbottitura.
Per quanto ne so, non puoi farlo utilizzando le attuali implementazioni di CSS. Per creare due colonne, uguali in altezza, è necessario JS.
Questo funziona per me in IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).
Funziona anche in IE 6 se si decommenta il div più chiaro in basso.
Modifica : come ha detto Natalie Downe, puoi semplicemente aggiungere larghezza: 100%; a #container invece.
<!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>
Non conosco un modo CSS per centrare verticalmente il testo nel div giusto se il div non ha un'altezza fissa. In tal caso, puoi impostare line-height sullo stesso valore dell'altezza div e inserire un div interno contenente il tuo testo con display: inline; altezza della linea: 110% .
Usando Javascript, puoi rendere i due tag div della stessa altezza. Il div più piccolo si adatterà alla stessa altezza del tag div più alto usando il codice mostrato di seguito:
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';
}
Con " a sinistra " e "destra" essendo l'id dei tag div.
Usando la proprietà css - > 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>
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>
Usando JS, usa data-same-height = " group_name " in tutti gli elementi che vuoi avere la stessa height .
L'esempio: https://jsfiddle.net/eoom2b82/
Il codice:
$(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();
});
Avevo bisogno di fare qualcosa di simile, ecco la mia implementazione. Per ricapitolare lo scopo, è avere 2 elementi che occupano la larghezza di un determinato contenitore padre e che l'altezza deve essere alta solo quanto deve essere. In sostanza l'altezza è uguale all'altezza massima della più grande quantità di contenuto, ma l'altro contenitore è a livello.
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%;
}
