hacer - innerhtml jquery
¿Cómo configurar correctamente la altura del 100% DIV para que coincida con la altura del documento/ventana? (9)
Tengo una envoltura posicionada para centrar con una imagen de fondo repetida con y:
<body>
<div id="wrapper">
...some content
</div>
</body>
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background-image: url(image.jpg) 250px 0px repeat-y;
}
Problema: cuando el tamaño de la ventana es mayor que la altura de la envoltura heredada de su contenido, la imagen obviamente no se repite en el eje y hasta la parte inferior de la ventana.
He usado jQuery para aplicar dinámicamente el estilo CSS en línea al envoltorio de acuerdo con la altura real del documento (cuando DOM está listo y en el evento de cambio de tamaño de la ventana):
$(function(){
$(''#wrapper'').css({''height'':($(document).height())+''px''});
$(window).resize(function(){
$(''#wrapper'').css({''height'':($(document).height())+''px''});
});
});
El problema con este enfoque es que cada vez que se extiende la altura de la ventana a un tamaño mayor que el tamaño mayor previamente redimensionado, la altura del documento se extiende por esta diferencia, haciendo que la envoltura DIV sea infinita si continúa cambiando el tamaño de la ventana infinitamente y tiene un infinito Espacio de visualización vertical.
En una pantalla típica de 30 "pulgadas con una altura de 1600px, cuando el usuario abre el sitio web con una altura de ventana de 1000px y la envoltura tiene una altura de 800px, la jQuery anterior establece la altura en 1000px en mosaico de la imagen de fondo correctamente. En este punto, una vez que el usuario extiende la el tamaño de la ventana a, por ejemplo, 1400px, el 1400px es un nuevo tamaño de documento "recordado por defecto" y no se actualiza a sí mismo, incluso si el usuario cambia el tamaño de su ventana a la altura original de 1000px, agregando 400px a la altura de la barra de desplazamiento en la parte inferior.
¿Cómo arreglar esto?
ACTUALIZACIÓN: (ventana) .height no parece funcionar, porque la altura de la ventana es la altura de una ventana gráfica. Cuando su ventana gráfica es más pequeña que el contenido y la desplaza, el contenedor siempre mantiene el tamaño de la ventana gráfica y no se extiende hasta la parte inferior de la posición de la ventana gráfica actual.
¿Por qué no usas width: 100% y height: 100% ?
La forma más fácil es agregar el:
$(''#ID'').css("height", $(document).height());
después de que la altura de la página correcta está determinada por el navegador. Si se cambia la altura del documento, vuelva a ejecutar el código anterior.
La forma más sencilla que encontré es viewport-height en css ...
div {height: 100vh;}
esto toma la altura de la ventana gráfica del navegador y la actualiza durante el cambio de tamaño.
Consulte "¿Puedo usar" para la lista de compatibilidad del navegador?
Lo descubrí yo mismo con la ayuda de la respuesta de alguien. Pero lo borró por alguna razón.
Aquí está la solución:
- Eliminar todos los hacks de altura CSS y 100% alturas
- Use 2 envoltorios anidados, uno en otro, por ejemplo, #wrapper y #truecontent
- Obtener la altura de una ventana de navegador. SI es más grande que #wrapper, entonces configure CSS en línea para #wrapper para que coincida con la altura actual de la ventana del navegador (manteniendo intacto #truecontent)
Escuche en (ventana) el evento de tamaño y SOLAMENTE aplique la altura de CSS en línea SI la ventana gráfica es más grande que la altura de #truecontent, de lo contrario, manténgalo intacto
$(function(){ var windowH = $(window).height(); var wrapperH = $(''#wrapper'').height(); if(windowH > wrapperH) { $(''#wrapper'').css({''height'':($(window).height())+''px''}); } $(window).resize(function(){ var windowH = $(window).height(); var wrapperH = $(''#wrapper'').height(); var differenceH = windowH - wrapperH; var newH = wrapperH + differenceH; var truecontentH = $(''#truecontent'').height(); if(windowH > truecontentH) { $(''#wrapper'').css(''height'', (newH)+''px''); } }) });
Podrías hacerlo absolute y poner ceros top y bottom eso es:
#fullHeightDiv {
position: absolute;
top: 0;
bottom: 0;
}
Use #element{ height:100vh}
Esto establecerá la altura del elemento #element al 100% de la viewport . Espero que esto ayude.
así es como respondí eso
<script type="text/javascript">
function resizebg(){
$(''#background'').css("height", $(document).height());
}
$(window).resize(function(){
resizebg();
});
$(document).scroll(function(){
resizebg();
});
//initial call
resizebg();
</script>
css:
#background{
position:absolute;
top:0;
left:0;
right:0;
}
así que básicamente en cada evento de cambio de tamaño sobrescribiré la altura del div en este caso una imagen que uso como superposición para el fondo y la tengo con una opacidad no tan colorida que también puedo teñirla en mi caso con el color de fondo.
pero esa es otra historia
cómo es esto
<style type="text/css">
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background: url(''image.JPG'') 250px 0px repeat-y;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function handleResize() {
var h = $(window).height();
$(''#wrapper'').css({''height'':h+''px''});
}
$(function(){
handleResize();
$(window).resize(function(){
handleResize();
});
});
</script>
</head>
<body>
<div id="wrapper">
...some content
</div>
</body>
html, body {
height:100%;
}
#wrapper {
min-height:100%;
}