CSS Cómo configurar la altura div 100% menos nPx

199

Tengo un envoltorio div que contiene 2 divs uno al lado del otro. Sobre este contenedor tengo un div que contiene mi encabezado. La envoltura div debe ser 100% menos la altura del encabezado. El encabezado es de unos 60 px. Esto está arreglado. Entonces mi pregunta es: ¿cómo configuro la altura de mi div de envoltura para que sea 100% menos los 60 px?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

css height

— Martijn
fuente

16

Realmente deseo que w3c considere agregar algún valor menos propiedad constante al ancho, se olvidaron de incluir los bordes en el ancho, pero deberían haber cambiado la definición, la mayoría de los hacks CSS desaparecerían si estas dos cosas estuvieran disponibles.

— samarjit samanta

79

Aquí hay un CSS en funcionamiento, probado en 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 los 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>

Expandir fragmento

— Alsciende
fuente

Funciona en FF, pero no lo hago funcionar en IE7. Solo veo el código 'Encabezado': <div id = "header"> Encabezado </div> <div id = "wrapper"> <div id = "left"> Left </div> <div id = "right"> Derecha </div> </div>

— Martijn

¿Has activado el modo compatible con los estándares? Agregaré una página de ejemplo en mi respuesta.

— Alsciende

1

Además, si necesita colocar estos divs en el medio de la página o en cualquier otro lugar, simplemente envuélvalos en un contenedor div y configúrelos position: relativeen el contenedor. Luego, coloque el contenedor donde desee en la página.

— Mrchief

¿Qué pasa con el div interno, dentro de #left, por ejemplo, si quiero 2 divs con alturas respectivas de 40% y 60%?

— TecHunter

¿Hay una razón específica de por qué se especificaron px en los parámetros de valor 0?

— Cassandra

274

En CSS3 podrías usar

height: calc(100% - 60px);

— libjup
fuente

25

Asegúrese de tener espacio antes y después del signo "-". Firefox necesita tener espacio antes del signo "-".

— Codler

77

Perfecto. No sabía que CSS3 podría hacer esto.

— Tom Beech

¡Guauu! exactamente lo que quería. Gracias.

— Sandhu

1

Esto es fantástico

— Mirko

47

Si necesita admitir IE6, use JavaScript, así que administre el tamaño del contenedor div (configure 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, pero espere una o dos semanas para que funcione en todos los casos y en todos los navegadores.

Para otros navegadores modernos, use este CSS:

position: absolute;
top: 60px;
bottom: 0px;

— Aaron Digulla
fuente

El sitio solo es compatible con IE 7. Cuando uso height: 100% y top: 60px; Todavía tengo una barra de desplazamiento. Puedo desplazarme 60 px hacia abajo.

— Martijn

44

No especifique una altura, use arriba y abajo y deje que el navegador calcule la altura.

— Aaron Digulla

Pero quiero que mi página tenga una altura máxima de 100% menos 60px; Si el contenido es más grande que eso, quiero barras de desplazamiento en el div usando overflow: scroll;

— Martijn

44

Para una barra de desplazamiento, agregue un div dentro del contenedor que lo llene por completo y haga que se desborde: desplazamiento;

— Aaron Digulla

Tenga en cuenta que debido a errores en IE7, esto podría fallar. Si no puede hacer que funcione, use JavaScript. Lo sé, no te gusta, pero lo comparas con una semana de trabajo luchando con errores extraños.

— Aaron Digulla

6

genial ... 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 de esta manera?

— Jayaveer
fuente

4

Puede hacer algo como altura: calc (100% - nPx); por ejemplo altura: calc (100% - 70px);

— DrB
fuente

2

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Asegúrese de usar menos

height: ~calc(100% - 60px);

De lo contrario, menos no va a compilarlo correctamente

— Dadhich Sourav
fuente

0

Esto no responde exactamente la pregunta planteada, pero crea el mismo efecto visual que está 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>

— Noel Walters
fuente

0

En este ejemplo, puede 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>

— Renzo Ciot
fuente

0

Todavía no he visto nada como esto publicado, pero pensé que lo publicaría.

<div class="main">
<header>Header</header>
<div class="content">Content</div>

Entonces 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 que funciona

Nota: No tengo idea de cuál es la compatibilidad del navegador para esto. Solo estaba jugando con soluciones alternativas y esto parecía funcionar bien.

— FreedomMan
fuente

-1

Utilice un div de envoltura externa establecido en 100% y luego su div de envoltura interna 100% debería ser relativa a eso.

Pensé con seguridad 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>

— Cade Roux
fuente

Puede dar un ejemplo de eso. No entiendo

— Martijn

Publiqué lo que estaba pensando, pero no puedo hacerlo funcionar tan temprano / tarde. Quizás si duermo un poco más.

— Cade Roux

-1

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%;
}

— escocés
fuente

1

No creo que esto funcione como se esperaba. Primero #headerdebe ser margin-top:-60px;. Segundo,height:100% significa que la altura será el 100% de la altura de los elementos principales, sin incluir márgenes, relleno y bordes. Dependiendo de su configuración de desplazamiento, esto hará que aparezcan barras de desplazamiento o que su contenido se recorte.

— Kylos