Div fijo en pantalla

terius53 · #1 (**permalink**) 13/10/2012, 23:19

Hola a todos, mi duda es la siguiente:

Estoy desarrollando una página web la cual en el lado izquierdo contiene un menú y en el lado derecho muestra la información, ¿Cómo le puedo hacer para que el menú de la izquierda se quede fijo en pantalla y lo único que se desplace sea el contenido d ela derecha? el efecto que quiero lograr es algo similar a lo que hace facebook.

Gracias y espero puedan ayudarme.

Nemutagk · #2 (**permalink**) 13/10/2012, 23:42

Eso no tiene nada que ver con PHP, en serio, chequen antes de publicar un post fuera de los foros indicados....

En fin, tu problema es de CSS, para tener un div fijo independientemente si se hace scroll o no se usa la propiedad "position:fixed", pero ojo, esta debe estar dentro de algún elemento con la propiedad "position:relative", busca mas info si tienes dudas...

flashmax · #3 (**permalink**) 14/10/2012, 06:40

te dejo un ejemplo, fíjate que el div left esta con posicion fixed como te indico Nemutagk

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
.contenedor {
	width:900px;
	height:100%;
	margin: 0 auto;
	color: #fff;
	background-color:#000;
}
.left {
	width:150px;
	height:100%;
	color: #fff;
	float:left;
	background-color:#666;
	position:fixed;
}
.right {
	width:750px;
	margin-left:150px;
	color: #fff;
	float:left;
	background-color:#000;
}
body {
	margin:0;
	padding:0;
}
</style>
</head>

<body>
<div class="contenedor">
  <div class="left">
    <ul>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      </ul>
</div>
  <div class="right">The standard Lorem Ipsum passage, used since the 1500s

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</body>
</html>