navegacion - ¿Cómo se crea div sin desplazamiento en la parte superior de una página HTML sin dos conjuntos de barras de desplazamiento?
menu navegacion horizontal html (5)
Belugabob tiene la idea correcta de que lo que estás tratando de hacer es un posicionamiento fijo, que IE 6 no es compatible.
Modifiqué un ejemplo de la parte inferior de este tutorial que debería hacer lo que desea y es compatible con IE 6+ además de todos los buenos navegadores. Funciona porque IE le permite poner Javascript en declaraciones de estilo:
<style type="text/css">
div#fixme {
width: 100%; /* For all browsers */
}
body > div#fixme {
position: fixed; /* For good browsers */
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( 0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + ''px'' );
top: expression( ( 0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ''px'' );
}
</style>
<![endif]>
<![endif]-->
<body>
<div id="fixme"> ...
¿Cómo se crea div sin desplazamiento que se parece a la cinta de MS Office 2007 en una página web sin dos conjuntos de barras de desplazamiento? Uno para la ventana y otro para el div.
Alternativamente, podrías usar
<div style=''position:absolute;top:0px:left:0px;''>Text</div>;
Se bloqueará el div en la parte superior de la página, pero si la página se desplaza hacia abajo permanecerá allí.
Prueba esto:
<!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>
<title>Fixed Header/Full Page Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,
div {
margin: 0;
padding: 0;
}
body {
/* Disable scrollbars and ensure that the body fills the window */
overflow: hidden;
width: 100%;
height: 100%;
}
#header {
/* Provide scrollbars if needed and fix the header dimensions */
overflow: auto;
position: absolute;
width: 100%;
height: 200px;
}
#main {
/* Provide scrollbars if needed, position below header, and derive height from top/bottom */
overflow: auto;
position: absolute;
width: 100%;
top: 200px;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="main">
<p>FIRST</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>LAST</p>
</div>
<!--[if lt IE 7]>
<script type="text/javascript">
var elMain = document.getElementById(''main'');
setMainDims();
document.body.onresize = setMainDims;
function setMainDims() {
elMain.style.height = (document.body.clientHeight - 200) + ''px'';
elMain.style.width = ''99%''
setTimeout("elMain.style.width = ''100%''", 0);
}
</script>
<![endif]-->
</body>
</html>
Básicamente, lo que está haciendo es eliminar las barras de desplazamiento del cuerpo y aplicar barras de desplazamiento a los elementos dentro del documento. Eso es simple El truco es obtener el div #main para llenar el espacio debajo del encabezado. Esto se logra en la mayoría de los navegadores estableciendo las top e bottom y dejando la height ajustar. El resultado es que la parte superior del div se fija debajo del encabezado y la parte inferior del div siempre se extenderá hasta la parte inferior de la pantalla.
Por supuesto, siempre hay IE6 allí para asegurarnos de ganar nuestros cheques de pago. Antes de la versión 7, IE no derivaba dimensiones de posiciones absolutas conflictivas. Algunas personas usan las expresiones css de IE para resolver este problema para IE6, pero estas expresiones se evalúan literalmente en cada mousemove, así que simplemente estoy #main el tamaño del #main div en el evento #main y ocultando ese bloque de javascript de otros navegadores usando un comentario condicional.
Las líneas que establecen el ancho al 99% y setTimeout para establecerlo de nuevo al 100% corrige una pequeña rareza de representación en IE6 que hace que la barra de desplazamiento horizontal aparezca ocasionalmente cuando se cambia el tamaño de la ventana.
Nota: Debe usar un doctype y obtener IE fuera del modo peculiar.
Probablemente me peguen los puristas de CSS aquí, pero usar una tabla con ancho y alto 100% funciona en cualquier navegador y no requiere hacks CSS específicos del navegador.
Use un elemento <div> posición fija, que tenga un ancho del 100% y un alto z-index .
También querrás asegurarte de que el inicio de tu contenido de desplazamiento no quede oculto por el <div> fijo, hasta que comiences a desplazarte hacia abajo, colocando esto en otro <div> y posicionándolo apropiadamente.
<body>
<div style="position: fixed; top: 0px; width:100%; height: 100px;">
HEader content goes here
</div>
<div style="margin-top: 100px;">
Main content goes here
</div>
</body>
Tenga en cuenta que la altura del primer <div> , y el margen superior del segundo, deberá ajustarse para adaptarse a sus necesidades.
PD. Esto no funciona en IE7, por alguna razón, pero es un buen punto de partida, y estoy seguro de que puedes encontrar alguna variación en este tema, que funcione de la forma que desees.