HTML/CSS: Fazendo duas divs flutuantes a mesma altura
https://stackoverflow.com/questions/1205159
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho um pequeno problema peculiar que atualmente resolvo usando um table, Veja abaixo. Basicamente, quero que duas divs ocupem 100% da largura disponível, mas ocupará apenas o máximo de espaço vertical necessário (o que não é realmente tão óbvio na foto). Os dois devem ter exatamente a mesma altura com uma pequena linha entre eles, como mostrado.
(fonte: pici.se)
Tudo isso é muito fácil de fazer usando table, o que estou fazendo atualmente. No entanto, não estou muito interessado na solução, pois semanticamente isso não é realmente uma tabela.
Solução
Você pode obter colunas de altura igual no CSS aplicando preenchimento inferior de uma grande quantidade, margem negativa inferior da mesma quantidade e circundando as colunas com uma div que tem transbordamento oculto. Centralizar verticalmente o texto é um pouco mais complicado, mas isso deve ajudá -lo no caminho.
#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>Eu acho que vale a pena mencionar que A resposta anterior do StreetPC tem HTML inválido, o doctype é xhtml e há citações únicas em torno dos atributos. Também vale a pena notar que você não precisa de um elemento extra com clear para limpar os carros alegóricos internos do recipiente. Se você usar o Overflow oculto, isso limpa os carros alegóricos em todos os navegadores que não são da AI e, em seguida, apenas adicionando algo para dar HasLayout, como largura ou zoom: 1 fará com que o IE limpe seus carros alegóricos internos.
Eu testei isso em todos os navegadores modernos FF3+ Opera9+ Chrome Safari 3+ e IE6/7/8. Pode parecer um truque feio, mas funciona bem e eu o uso muito na produção.
Eu espero que isso ajude.
Outras dicas
É ano de 2012+n, então se você não se importa mais com o IE6/7, display:table, display:table-row e display:table-cell Trabalhe em todos os navegadores modernos:
http://www.456beastreet.com/archive/200405/equal_height_boxes_with_css/
Atualização 2016-06-17: Se você acha que chegou a hora display:flex, Confira Flexbox Froggy.
Você deve usar o Flexbox para conseguir isso. Não é suportado no IE8 e IE9 e apenas com o prefixo -ms no IE10, mas todos os outros navegadores o sustentam. Para prefixos de fornecedores, você também deve usar 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.
}
Você pode fazer isso funcionar com JS:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
Este é um problema clássico no CSS. Não há realmente uma solução para isso.
Este artigo de uma lista separada é uma boa leitura sobre esse problema. Ele usa uma técnica chamada "colunas faux", com base em ter uma imagem de fundo verticalmente azulejo elemento que contém as colunas Isso cria a ilusão de colunas de comprimento igual. Como está no invólucro dos elementos flutuados, é o tempo que o elemento mais longo.
Os editores da lista A separados têm esta nota no artigo:
Uma nota dos editores: embora excelente para o seu tempo, este artigo pode não refletir as melhores práticas modernas.
A técnica requer designs de largura completamente estáticos que não funcionam bem com os layouts de líquido e as técnicas de design responsivas que são populares hoje para sites de dispositivos cruzados. Para locais de largura estática, no entanto, é uma opção confiável.
Eu tive um problema semelhante e, na minha opinião, a melhor opção é usar apenas um pouco de JavaScript ou JQuery.
Você pode obter o DIVs procurado como a mesma altura, obtendo o maior valor de div e aplicando esse valor a todos os outros divs. Se você tem muitas divs e muitas soluções, sugiro escrever pouco código JS adiantado para descobrir qual de todos os divs é o mais alto e depois usar seu valor.
Com jQuery e 2 divs, é muito simples, aqui está o código de exemplo:
$('.smaller-div').css('height',$('.higher-div').css('height'));
E para o fim, há uma última coisa. O preenchimento deles (superior e inferior) deve ser o mesmo! Se alguém tiver um preenchimento maior, você precisa eliminar a diferença de preenchimento.
Até onde eu sei, você não pode fazer isso usando implementações atuais do CSS. Para fazer duas colunas, igual em altura, você precisa de JS.
Isso funciona para mim no IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).
Também funciona no IE 6 se você não se dedicar à div em parte inferior.Editar: Como Natalie Downe disse, você pode simplesmente adicionar width: 100%; para #container em vez de.
<!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>
Não conheço uma maneira CSS de centralizar verticalmente o texto na div, se a div não for de altura fixa. Se for, você pode definir o line-height para o mesmo valor que a altura da div e coloque uma div interior contendo seu texto com display: inline; line-height: 110%.
Usando o JavaScript, você pode fazer com que as duas tags div na mesma altura. O DIV menor se ajustará a ser a mesma altura que a tag Div mais alta usando o código mostrado abaixo:
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';
}
Com "Esquerda" e "Right" sendo os id das tags da div.
Usando a propriedade 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, use data-same-height="group_name" em todos os elementos que você deseja ter o mesmo altura.
O exemplo:https://jsfiddle.net/eoom2b82/
O código:
$(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();
});
Eu precisava fazer algo semelhante, aqui está minha implementação. Para recapitular o objetivo, é que dois elementos ocorram a largura de um determinado recipiente pai e a altura para ser tão alta quanto precisa ser. Essencialmente altura igual a altura máxima da maior quantidade de conteúdo, mas o outro contêiner está nivelado.
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%;
}
