html - posicionamiento - fondos bootstrap
¿Cómo conseguir un div para cambiar el tamaño de su altura para adaptarse al contenedor? (8)
¿Cómo puedo hacer que el div nav se expanda hacia abajo o que tenga la altura igual que su div principal ( contenedor )?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
#container {
margin-left: auto;
margin-right: auto;
border: 1px solid black;
overflow: auto;
width: 800px;
}
#nav {
width: 19%;
border: 1px solid green;
float:left;
}
#content {
width: 79%;
border: 1px solid red;
float:right;
}
</style>
<div id=container>
<div id=nav>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<div id=content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum consequat ligula vitae posuere. Mauris dolor quam, consequat vel condimentum eget, aliquet sit amet sem. Nulla in lectus ac felis ultrices dignissim quis ac orci. Nam non tellus eget metus sollicitudin venenatis sit amet at dui. Quisque malesuada feugiat tellus, at semper eros mollis sed. In luctus tellus in magna condimentum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel dui est. Aliquam vitae condimentum dui. Praesent vel mi at odio blandit pellentesque. Proin felis massa, vestibulum a hendrerit ut, imperdiet in nulla. Sed aliquam, dolor id congue porttitor, mauris turpis congue felis, vel luctus ligula libero in arcu. Pellentesque egestas blandit turpis ac aliquet. Sed sit amet orci non turpis feugiat euismod. In elementum tristique tortor ac semper.</p>
</div>
</div>
</body>
</html>
Manera simple
Puede lograr esto configurando los atributos top e bottom de la navegación en 0 y la position: absolute . Coloca el contenedor en position: relative .
En la parte inferior de ese artículo, hay un enlace a la biblioteca js IE7 (y IE8) de Dean Edwards que debe incluir para los visitantes de IE6. Es una biblioteca JS que realmente hace que IE6 se comporte como IE7 (u 8) cuando lo incluyes. ¡Dulce! ... por supuesto que hay errores, pero al menos sabes cómo tratar con ellos.
Dean Edwards ''IE7 y 8 bibliotecas JS
Manera moderna (Flexbox)
IE11 + y todos los navegadores modernos soportan flexbox.
.container {
display: flex;
flex-direction: column;
}
.child {
flex-grow: 1;
}
Desafortunadamente, no hay una manera infalible de lograr esto. Un bloque solo se expandirá a la altura de su contenedor si no está flotando. Los bloques flotantes se consideran fuera del flujo del documento.
Una forma de hacer lo siguiente sin usar JavaScript es a través de una técnica llamada Faux-Columns .
Básicamente, implica aplicar una background-image a los elementos principales de los elementos flotantes, lo que te hace creer que los dos elementos tienen la misma altura.
Más información disponible en:
Otro método simple está ahí. No necesitas codificar más en CSS. Con solo incluir una secuencia de comandos java e ingresar la div "id" dentro de la secuencia de comandos, puede obtener la misma altura de columnas para que pueda ajustar la altura al contenedor. Funciona en los principales navegadores.
Código fuente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
#container {
margin-left: auto;
margin-right: auto;
border: 1px solid black;
overflow: auto;
width: 800px;
}
#nav {
width: 19%;
border: 1px solid green;
float:left;
}
#content {
width: 79%;
border: 1px solid red;
float:right;
}
</style>
<script language="javascript">
var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["nav", "content"]
ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}
ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}
ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")
</script>
<div id=container>
<div id=nav>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<div id=content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum consequat ligula vitae posuere. Mauris dolor quam, consequat vel condimentum eget, aliquet sit amet sem. Nulla in lectus ac felis ultrices dignissim quis ac orci. Nam non tellus eget metus sollicitudin venenatis sit amet at dui. Quisque malesuada feugiat tellus, at semper eros mollis sed. In luctus tellus in magna condimentum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel dui est. Aliquam vitae condimentum dui. Praesent vel mi at odio blandit pellentesque. Proin felis massa, vestibulum a hendrerit ut, imperdiet in nulla. Sed aliquam, dolor id congue porttitor, mauris turpis congue felis, vel luctus ligula libero in arcu. Pellentesque egestas blandit turpis ac aliquet. Sed sit amet orci non turpis feugiat euismod. In elementum tristique tortor ac semper.</p>
</div>
</div>
</body>
</html>
Puede incluir cualquier no de divs en este script.
ddequalcolumns.columnswatch = ["nav", "content"]
Modificar en la línea anterior es suficiente.
Prueba esto.
Probablemente quieras usar la siguiente declaración:
height: 100%;
Esto establecerá la altura del div en el 100% de la altura de sus contenedores, lo que hará que llene el div padre.
Si el truco usa position:absolute , position:relative y top/left/bottom/right: 0px no es apropiado para su situación, puede intentar:
#nav {
height: inherit;
}
Esto funcionó en una de nuestras páginas, ¡aunque no estoy seguro de qué otras condiciones se necesitaron para tener éxito!
Tuve el mismo problema, lo resolví usando algunos javascript.
<script type="text/javascript">
var theHeight = $("#PrimaryContent").height() + 100;
$(''#SecondaryContent'').height(theHeight);
</script>
posiblemente necesitaría especificar la altura del contenedor y luego establecer la altura de navegación en 100%.
Edición: eché un vistazo rápido y parece que la propiedad de la altura se aplica a la altura de los padres, por lo que de hecho tendrá que establecer la altura de los contenedores.
NB: establecer la altura del elemento del cuerpo en 100% solo la escala a la altura de la ventana del navegador. Cualquier contenido que pase por una página no tendrá el mismo fondo, etc.
<!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">
#top, #bottom {
height: 100px;
width: 100%;
position: relative;
}
#container {
overflow: hidden;
position: relative;
width: 100%;
}
#container .left {
height: 550px;
width: 55%;
position: relative;
float: left;
background-color: #3399FF;
}
#container .right {
height: 100%;
position: absolute;
right: 0;
left: 55%;
bottom: 0px;
top: 0px;
background-color: #3366CC;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="bottom"></div>
</body>
</html>