javascript - dinamico - Cómo hacer que el contenido principal div complete la altura de la pantalla con css
hacer que un div se adapte al contenido (10)
Aunque esto podría parecer un problema fácil, ¡pero en realidad no es así!
He intentado muchas cosas para lograr lo que estás tratando de hacer con CSS puro, y todos mis intentos fueron fallidos. Pero ... ¡hay una solución posible si usas javascript o jquery!
Suponiendo que tienes este CSS:
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
Suponiendo que tienes este HTML:
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
Prueba esto con jquery:
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $(''#myheader'').height();/* get the header visible height on screen */
var bodyHeight = $(''#mybody'').height();/* get the body visible height on screen */
var footerHeight = $(''#myfooter'').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$(''#mybody'').height(newBodyHeight);
}
});
</script>
Nota: No estoy usando el posicionamiento absoluto en esta solución, ya que podría verse mal en los navegadores móviles
Esta pregunta ya tiene una respuesta aquí:
Entonces tengo una página web con encabezado, cuerpo principal y pie de página. Quiero que la persona principal complete el 100% de la página (llene el 100% entre el pie de página y el encabezado) Mi pie de página es la posición absoluta con la parte inferior: 0. Cada vez que intento configurar el cuerpo principal al 100% de altura o cambiar de posición o algo, también desborda el encabezado. Si establece el cuerpo en la posición absoluta con la top: 40 (porque mi encabezado es 40px alto), simplemente irá 40px demasiado abajo, creando una barra de desplazamiento.
Creé un archivo html simple ya que no puedo publicar toda la página / css del proyecto real. Con el código de muestra, aunque el cuerpo de contenido principal llena la pantalla, baja 40px demasiado (causa del encabezado, supongo).
html, body{
margin: 0;
padding: 0;}
header{
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent{
background-color: green;
height: 100%;
width: 100%;
}
footer{
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
el html
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>
¿Alguien sabe la respuesta?
Bueno, hay diferentes implementaciones para diferentes navegadores.
En mi opinión, la solución más simple y elegante es usar CSS calc (). Desafortunadamente, este método no está disponible en ie8 y menos, y tampoco está disponible en los navegadores android y en la ópera móvil. Sin embargo, si usa métodos separados para eso, puede intentar esto: http://jsfiddle.net/uRskD/
El marcado:
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
Y el CSS:
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
Mi solución secundaria incluye el método de pie de página adhesivo y el tamaño de la caja. Básicamente, esto permite que el elemento del cuerpo rellene el 100% de altura de su elemento primario e incluye el relleno en ese 100% con box-sizing: border-box; . http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
Mi tercer método sería usar jQuery para establecer la min-altura del área de contenido principal. http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
Y el JS:
$(function() {
headerHeight = $(''#header'').height();
footerHeight = $(''#footer'').height();
windowHeight = $(window).height();
$(''#body'').css(''min-height'', windowHeight - headerHeight - footerHeight);
});
Esta pregunta es un duplicado de Haga que un div llene el alto del espacio de pantalla restante y la respuesta correcta es usar el modelo de flexbox .
Todos los principales navegadores y IE11 + admiten Flexbox. Para IE 10 o anterior, o Android 4.3 y más antiguo, puede usar el FlexieJS .
Tenga en cuenta lo simple que son el marcado y el CSS. Sin mesa piratea ni nada.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
En el CSS anterior, la propiedad flex abrevia las propiedades flex-grow flex-shrink , flex-shrink y flex-basis para establecer la flexibilidad de los elementos flexibles. Mozilla tiene una flexbox .
Esto permite que un cuerpo de contenido centrado con min-width para que mis formularios no colapsen gracioso:
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
Y mi página de diseño se ve así:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
Ejemplo aquí: http://data.nwtresearch.com/
Una nota más, si quieres ver el fondo de la página completa como el código que agregaste, elimina la height: auto !important; de la envoltura div: http://jsfiddle.net/mdares/a8VVw/
Hay una unidad de CSS llamada ancho de vista / altura de la ventana gráfica.
Ejemplo
.mainbody{height: 100vh;} similarmente html,body{width: 100vw;}
o 90vh = 90% de la altura de la ventana gráfica.
** IE9 + y la mayoría de los navegadores modernos.
No estoy seguro de qué es exactamente lo que buscas, pero creo que lo entiendo.
Un encabezado: ¿se mantiene en la parte superior de la pantalla? Un pie de página: ¿se queda en la parte inferior de la pantalla? Área de contenido -> se ajusta al espacio entre el pie de página y el encabezado?
Puede hacer esto mediante posicionamiento absoluto o con posicionamiento fijo.
Aquí hay un ejemplo con posicionamiento absoluto: http://jsfiddle.net/FMYXY/1/
Margen:
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS:
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
Para que funcione mejor, te sugiero usar% en lugar de píxeles, ya que tendrás problemas con diferentes tamaños de pantalla / dispositivo.
Usando la top: 40px y la bottom: 40px (suponiendo que el pie de página también sea 40px) sin altura definida, puede hacer que esto funcione.
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
Valores relativos como: altura: 100% usará el elemento principal en HTML como una referencia, para usar valores relativos en altura necesitarás hacer que tus etiquetas html y body tengan una altura del 100% como esa:
HTML
<body>
<div class=''content''></div>
</body>
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
No se requiere Javascript, ni posicionamiento absoluto ni alturas fijas para este.
Aquí hay un método de CSS / CSS único que no requiere alturas fijas o posicionamiento absoluto :
CSS
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
HTML
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
Véalo en acción aquí: http://jsfiddle.net/AzLQY/
El beneficio de este método es que el pie de página y el encabezado pueden crecer para coincidir con su contenido y el cuerpo se ajustará automáticamente. También puede optar por limitar su altura con css.
- no se necesita altura en%
- no se necesita jQuery
(!) stretch div usando bottom y top:
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
revisa mi código: http://jsfiddle.net/aslancods/mW9WF/