que - En una página de dos columnas, ¿cómo puedo hacer crecer el div izquierdo a la misma altura del div derecho usando CSS o Javascript?
div que ocupe toda la pantalla bootstrap (11)
Estoy intentando hacer una página de dos columnas usando un diseño basado en div (¡sin tablas, por favor!). El problema es que no puedo hacer crecer el div izquierdo para que coincida con la altura del derecho. Mi div correcto normalmente tiene mucho contenido.
Aquí hay un ejemplo emparejado de mi plantilla para ilustrar el problema.
<div style="float:left; width: 150px; border: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>
texto alternativo http://involution.com/images/divlayout.png
@hoyhoy
Si un diseñador puede hacer que esto funcione en html, entonces puede tener este diseño. Si es un verdadero maestro del diseño web, se dará cuenta de que esto es una limitación de los medios, ya que el video no es posible en los anuncios de las revistas.
Si le gustaría simular el peso dando igual importancia a las 2 columnas, cambie los bordes, de modo que parezcan tener el mismo peso y haga que los colores de los bordes contrasten con el color de fuente de las columnas.
Pero en cuanto a hacer que los elementos físicos tengan la misma altura, solo puedes hacer eso con una construcción de tabla, o establecer las alturas, en este punto en el tiempo. Para simularlos con el mismo tamaño, no tienen que ser del mismo tamaño.
La respuesta más simple se encuentra en la próxima versión de css (3), que actualmente no admite el navegador.
Por ahora está relegado a calcular alturas en javascript y configurarlas en el lado izquierdo.
Si la navegación es tan importante para ubicarla de esa manera, ejecútela en la parte superior.
también puedes hacer un truco visual moviendo los bordes al contenedor y al interior más grande, y hacer que parezca tener el mismo tamaño.
esto hace que se vea igual, pero no lo es.
<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
<div style="float:left; width: 150px; border-top: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
...
</div>
<div style="clear:both;" ></div>
</div>
Puedes hacerlo en jQuery realmente simple, pero no estoy seguro de que JS deba usarse para tales cosas. La mejor forma es hacerlo con CSS puro.
Eche un vistazo a las columnas falsas o incluso a las columnas fluidas de imitación
También otra técnica (no funciona en el hermoso IE6) es posicionar: relativo al contenedor principal. El contenedor secundario (la lista de navegación en su caso) debe posicionarse de forma absoluta y forzada a ocupar todo el espacio con ''top: 0; abajo: 0; ''
Esta es una de esas cosas perfectamente razonables y simples que CSS no puede hacer. Faux Columns, como lo sugirió Silviu, es una solución alternativa pero funcional. Sería encantador si algún día hubiera una manera de decir
div.foo { height: $(div.blah.height); }
¡Se puede hacer en CSS! No dejes que la gente te diga lo contrario.
La manera más fácil y sin dolor de hacerlo es usar el método Faux Columns .
Sin embargo, si esa solución no funciona para usted, querrá leer sobre esta técnica . Pero ten cuidado, este es el tipo de piratería CSS que te hará despertar en un sudor frío en el medio de la noche.
La esencia de esto es que le asigna una gran cantidad de relleno al pie de la columna, y un margen negativo del mismo tamaño. Luego, coloca sus columnas en un contenedor que tiene overflow: hidden conjunto overflow: hidden . Más o menos los valores de relleno / margen permiten que la caja se siga expandiendo hasta que llega al final del contenedor (que está determinada por la columna con más contenido) y cualquier espacio adicional generado por el relleno se corta como desbordamiento. No tiene mucho sentido, lo sé ...
<div id="wrapper">
<div id="col1">Content</div>
<div id="col2">Longer Content</div>
</div>
#wrapper {
overflow: hidden;
}
#col1, #col2 {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
Asegúrese de leer el artículo completo al que me he vinculado, hay una serie de advertencias y otros problemas de implementación. No es una técnica bonita, pero funciona bastante bien.
Ahora que lo pienso, nunca lo hice con un borde inferior en la columna. Probablemente solo se desborde y se corte. Es posible que desee que el borde inferior proceda de un elemento separado que forma parte del contenido de la columna.
De todos modos, sé que no es una solución mágica perfecta. Puede que solo tengas que jugar con él, o hackear sus fallas.
Esto se puede hacer con CSS usando colores de fondo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
background:#FFF;
}
#header {
width: 100%;
height: 160px;
background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
background: #99C;
color: #000;
float: right;/* float left for right sidebar */
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
border-top: 1px solid #1e90ff;
border-bottom: 10px solid #1e90ff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<!--header and menu content goes here -->
<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc
vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>
<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>
También hay una solución basada en Javascript. Si tiene jQuery, puede usar el siguiente complemento.
<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
var maxHeight=0;
this.each(function(){
if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
$(this).height(maxHeight + "px");
if (this.offsetHeight>maxHeight) {
$(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
}
});
};
// usage
$(function() {
$(''.column1, .column2, .column3'').equalHeights();
});
</script>
Lo uso para alinear 2 columnas con ID "centro" y "derecha":
var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);
if (c.outerHeight() < r.outerHeight()) {
c.height(r.height () + rp - cp);
} else {
r.height(c.height () + cp - rp);
}
Espero eso ayude.
Use jQuery para este problema; simplemente llame a esta función en su función de listo:
function setHeight(){
var height = $(document).height(); //optionally, subtract some from the height
$("#leftDiv").css("height", height + "px");
}
Para aumentar el div de menú izquierdo con la misma altura que el div de contenido correcto.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var height = $(document).height(); //optionally, subtract some from the height
$("#menu").css("height", (height) + "px");
$("#content").css("height", (height) + "px");
});
</script>
<style type="text/css">
<!--
html, body {
font-family: Arial;
font-size: 12px;
}
#header {
background-color: #F9C;
height: 200px;
width: 100%;
float: left;
position: relative;
}
#menu {
background-color: #6CF;
float: left;
min-height: 100%;
height: auto;
width: 10%;
position: relative;
}
#content {
background-color: #6f6;
float: right;
height: auto;
width: 90%;
position: relative;
}
#footer {
background-color: #996;
float: left;
height: 100px;
width: 100%;
position: relative;
}
-->
</style>
</head>
<body>
<div id="header">
i am a header
</div>
<div id="menu">
i am a menu
</div>
<div id="content">
I am an example of how to do layout with css rules and divs.
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
</div>
<div id="footer">
footer
</div>
</body>
</html>