Cómo se crea un 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.Cómo se crea un div sin desplazamiento en la parte superior de una página HTML sin dos conjuntos de barras de desplazamiento
Utilice un elemento de posición fija <div>, que tiene un ancho del 100% y un alto z-index.
También querrá asegurarse de que que el inicio de su contenido de desplazamiento no está oscurecida por la <div> fijo, hasta que empiece a desplazarse hacia abajo, poniendo esto en otro <div> y posicionamiento esta manera apropiada.
<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>
Nota del la altura de la primera <div>, y el margen superior de la segunda, tendrá que ser ajustado para que se adapte a sus necesidades.
P.S. 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.
tenga en cuenta que esto no funcionará en IE6, y solo en IE7 en modo estricto. – nickf
Sí, lo descubrí por las malas, no son incompatibles las incompatibilidades del navegador. Probablemente necesite verificar el marcado de StackOverflow, ya que esto hace algo similar para mostrar las notificaciones sobre su perfil. – belugabob
+1 porque es lo que stackoverflow hace. –
Se puede usar alternativamente
<div style='position:absolute;top:0px:left:0px;'>Text</div>;
Será Jamm el div en la parte superior de la página, pero si su página se desplaza hacia abajo se quedará allí.
Hay un error de sintaxis pequeño pero importante en tu respuesta ... quieres un punto y coma después de la parte superior: 0px; (actualmente dos puntos) – Yetti99
Belugabob tiene la idea correcta de que lo que está tratando de hacer es un posicionamiento fijo, que IE 6 no es compatible.
Modifiqué un ejemplo de la parte inferior de this tutorial que debería hacer lo que quiera y soportar IE 6+ además de todos los buenos navegadores. Funciona porque el IE le permite poner el Javascript en las 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"> ...
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 la eliminación de las barras de desplazamiento del cuerpo y la aplicación de las barras de desplazamiento de 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 posiciones top y bottom y dejando el height desarmado. 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. Antes de la versión 7, IE no derivaba dimensiones de posiciones absolutas conflictivas. Some people use 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 redimensionando el #main div en el evento resize y ocultando ese bloque de javascript desde 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 al cambiar el tamaño de la ventana.
Nota: Debe usar un doctype y obtener IE fuera del modo peculiar.
Probablemente voy a ser golpeado por los puristas de CSS aquí, pero el uso de una tabla con 100% de ancho y alto funciona en cualquier navegador, y no requiere hacks CSS específicos del navegador.
¿Cómo funciona el uso de una tabla aquí? Utilizándolo como ¿qué/dónde? – PandaWood
marque aquí: http://www.imaputz.com/cssStuff/bigFourVersion.html# – sbr