pantalla - CSS Cómo configurar la altura del div 100% menos nPx
css div height 100 (10)
Tengo un div envoltorio que contiene 2 divs uno al lado del otro. Sobre este contenedor tengo un div que contiene mi encabezado. El div envoltorio debe ser 100% menos la altura del encabezado. El encabezado es de aproximadamente 60 px. Esto es fijo. Entonces mi pregunta es: ¿cómo configuro la altura de mi divisor envoltorio para que sea 100% menos 60 px?
<div id="header"></div>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
Aquí hay un css que funciona, probado bajo Firefox / IE7 / Safari / Chrome / Opera.
* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
"overflow-y" no está aprobado por w3c, pero todos los principales navegadores lo admiten. Sus dos divs #left y #right mostrarán una barra de desplazamiento vertical si su contenido es demasiado alto.
Para que esto funcione bajo IE7, debe activar el modo compatible con estándares agregando un DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;overflow:hidden}
div{position:absolute}
div#header{top:0px;left:0px;right:0px;height:60px}
div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="left"><div style="height:1000px">high content</div></div>
<div id="right"></div>
</div>
</body>
En CSS3 puedes usar
height: calc(100% - 60px);
En este ejemplo, puedes identificar diferentes áreas:
<html>
<style>
#divContainer {
width: 100%;
height: 100%;
}
#divHeader {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 28px;
background-color:blue;
}
#divContentArea {
position: absolute;
left: 0px;
top: 30px;
right: 0px;
bottom: 30px;
}
#divContentLeft {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
bottom: 0px;
background-color:red;
}
#divContentCenter {
position: absolute;
top: 0px;
left: 200px;
bottom: 0px;
right:200px;
background-color:yellow;
}
#divContentRight {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width:200px;
background-color:red;
}
#divFooter {
position: absolute;
height: 28px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:blue;
}
</style>
<body >
<div id="divContainer">
<div id="divHeader"> top
</div>
<div id="divContentArea">
<div id="divContentLeft">left
</div>
<div id="divContentCenter">center
</div>
<div id="divContentRight">right
</div>
</div>
<div id="divFooter">bottom
</div>
</div>
</body>
</html>
Esto no responde exactamente a la pregunta planteada, pero sí crea el mismo efecto visual que estás tratando de lograr.
<style>
body {
border:0;
padding:0;
margin:0;
padding-top:60px;
}
#header {
position:absolute;
top:0;
height:60px;
width:100%;
}
#wrapper {
height:100%;
width:100%;
}
</style>
No he visto nada como esto publicado todavía, pero pensé que lo pondría allí.
<div class="main">
<header>Header</header>
<div class="content">Content</div>
Luego CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.main {
height: 100%;
padding-top: 50px;
box-sizing: border-box;
}
header {
height: 50px;
margin-top: -50px;
width: 100%;
background-color: #5078a5;
}
.content {
height: 100%;
background-color: #999999;
}
Aquí hay un jsfiddle trabajo
Nota: no tengo idea de la compatibilidad del navegador para esto. Solo estaba jugando con soluciones alternativas y esto parecía funcionar bien.
Puede hacer algo como altura: calc (100% - nPx); por ejemplo, altura: calc (100% - 70px);
Si necesita admitir IE6, use JavaScript para administrar el tamaño del div wrapper (establezca la posición del elemento en píxeles después de leer el tamaño de la ventana). Si no desea usar JavaScript, entonces esto no se puede hacer. Hay soluciones temporales, pero se espera una semana o dos para que funcionen en todos los casos y en todos los navegadores.
Para otros navegadores modernos, use este css:
position: absolute;
top: 60px;
bottom: 0px;
Si no quieres usar el posicionamiento absoluto y todo ese jazz, aquí hay una solución que me gusta usar:
tu html:
<body>
<div id="header"></div>
<div id="wrapper"></div>
</body>
tu css:
body {
height:100%;
padding-top:60px;
}
#header {
margin-top:60px;
height:60px;
}
#wrapper {
height:100%;
}
Use un conjunto de divisiones de envoltura externa al 100% y, a continuación, su envoltura interior div 100% debe ser ahora relativa a eso.
Estaba seguro de que esto solía funcionar para mí, pero aparentemente no:
<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper" style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
<div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text
on the left</div>
<div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the
right</div>
</div>
</div>
</body>
</html>
muy bueno ... ahora he dejado de usar% he he he ... a excepción del contenedor principal como se muestra a continuación:
<div id="divContainer">
<div id="divHeader">
</div>
<div id="divContentArea">
<div id="divContentLeft">
</div>
<div id="divContentRight">
</div>
</div>
<div id="divFooter">
</div>
</div>
y aquí está el CSS:
#divContainer {
width: 100%;
height: 100%;
}
#divHeader {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 28px;
}
#divContentArea {
position: absolute;
left: 0px;
top: 30px;
right: 0px;
bottom: 30px;
}
#divContentLeft {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
bottom: 0px;
}
#divContentRight {
position: absolute;
top: 0px;
left: 254px;
right: 0px;
bottom: 0px;
}
#divFooter {
position: absolute;
height: 28px;
left: 0px;
bottom: 0px;
right: 0px;
}
Probé esto en todos los navegadores conocidos y funciona bien. ¿Hay algún inconveniente al usar esta forma?