dividir pantalla verticalmente (ancho fijo+ancho variable)

#1 (**permalink**) 02/05/2012, 04:17

Hola:

Estoy haciendo una pequeña web y se me planteó un problema.

Quería una barra lateral (a la izquierda) con un ancho fijo de 50px y siempre visible. El resto de la pantalla sería un contenedor con ancho variable.

Hasta ahí bien. Pero lo que quiero es que el contenido del contenedor de ancho variable empiece a partir de la barra lateral y no ocupe toda la pantalla. El ancho sería algo estilo 100%-50px, pero no sé como se puede hacer eso..

Esquema: http://i49.tinypic.com/10ftc37.jpg

Espero haberme explicado. Gracias!

IsaBelM · #2 (**permalink**) 02/05/2012, 07:24

asignale al contendor

Cita:

float: right;
margin-left: 50px;

#3 (**permalink**) 02/05/2012, 08:56

muchas gracias :D

villano4 · #4 (**permalink**) 04/05/2012, 09:54

En mi caso lo que quiero hacer es lo mismo pero horizontalmente, con un header y un footer de 70px de alto, y el contenido que quede con lo que sobra del 100%-140px, y en caso de que el contenido sea mayor, tenga scroll en esa parte nada mas, que el header y footer no se muevan para nada.

IsaBelM · #5 (**permalink**) 04/05/2012, 13:56

no ocupes temas de otros usuarios

eso es algo más complicado

Cita:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

#cont {
background: pink;
width: 500px;
height: 94.6%;
margin: 0 auto;
border-width: 1px 1px 0 1px;
border-color: red red transparent red;
border-style: solid solid none solid;
}

#cont #div1 {
width: 500px;
height: 5%;
background: yellow;
border-bottom: 1px solid red;
}

#cont #div2 {
background: pink;
height: 88%;
overflow-x: auto;
padding: 4% 20px;
}

#footer {
width: 500px;
height: 5%;
background: orange;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>

<div id="cont">

<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus</div>

<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
</div>

</div>

<div id="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus</div>

</body>
</html>

villano4 · #6 (**permalink**) 04/05/2012, 14:21

Perdón, me tomé la libertad de hacerlo ya que precisamente su pregunta está muy relacionada con la duda que tengo.
Agradezco el codigo que me pones, el cual efectivamente hace lo que pido, sin embargo, requiero que tanto el header como el footer, tengan el mismo alto en px, y no varie en función del navegador, pero si el contenido medio se pueda hacer mas grande o mas pequeño dependiendo de esas variables (el navegador-pantalla-SO).
Entiendo perfectamente que es mucho mas complicado, en mi caso lo tengo "resuelto" usando js, pero creo que la forma en que lo resolví, no es la mas adecuada, ya que al poner la url, se precarga por asi decir un codigo js con html, que redirige a otra pagina donde pasa los valores de alto y ancho obtenidos con el js, y los pone como variables de sesion en php, y de ahi regresa a la url original, y recongifura el css via php (style.css.php) y entonces ya me muestra el sitio.

Sin embargo, creo que no es la mejor manera de hacerlo, demasiadas vueltas para mi gusto, sobre todo si se puede hacer con css puro. Esa es mi intención, saber como hacerle, para mejorar, eficientar, y hacer que cumpla con standares mi página

IsaBelM · #7 (**permalink**) 04/05/2012, 14:35

normalmente los ejemplos no son a medidas, simplemente son orientativos. entonces, lo que te queda es hacer algunos cambios para adaptarlo a lo que exactamente deseas

villano4 · #8 (**permalink**) 04/05/2012, 18:07

De nuevo, IsaBelM, te agradezco, la molestia que te tomaste al poner el codigo, y entiendo perfectamente que no me lo van a dar listo para usar.

Se entiende perfectamente, que la intencion del foro es ayudar a resolver los problemas, mas no que hagan paginas completas, ni codigo listo.

Sin embargo he hecho cambios, y no consigo el efecto deseado, cambiando el width de 500px como lo presentas, a 100%, se me descuadra todo y el scroll mueve hasta el header y footer, lo que me inclina a pensar que no he entendido del todo tu codigo, igual soy muy noob en el css, y no alcanzo a ver, lo que tu me estas expresando.

IsaBelM · #9 (**permalink**) 05/05/2012, 07:38

al parecer ayer no leí con la suficiente atención tu post.

aun haciéndolo con unidades relativas no lo logras del todo, así que la manera de hacerlo es javascript ya que lo realmente importante es el área activa de la página

villano4 · #10 (**permalink**) 17/05/2012, 19:03

Bueno @IsaBelM
Te comento que logré el cometido, claro usando css3, y una función calc del mismo aunque solo es compatible con FF y IE9, crhome no lo acepta, y siempre he dicho que IE apesta, creo que me tragare mis palabras.

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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
width:100%
}
.wrapper {
height: -moz-calc(100% - 140px);
height: calc(100% - 140px);
overflow:auto;
z-index:1;
}
.footer, .encabezado {
height: 70px;
}
.footer{
background:#345678;
z-index:12;
}
</style>
</head>
<body>
<div class="encabezado"></div>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.Your website content here.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.Your website content here.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>

IsaBelM · #11 (**permalink**) 18/05/2012, 13:42

eso te lo prodría haber dicho yo. no fue un antojo que te recomendara el uso de javascript, aún cuando tu consulta fue el foro de css

busca información sobre la propiedad offsetHeight

villano4 · #12 (**permalink**) 18/05/2012, 14:42

Grax, la verdad lo tenia resuelto con javascript, sin embargo, tiene muchos defectos para mi gusto, ya que por principio de cuentas queiro que salga en forma definitiva, y no ya que se muestre el javascript lo reacomode, ya que esto produce un efecto desagradable para mi gusto.

Entonces lo que hago es tomar los valores del ancho y alto del navegador con javascript, y redireccionar, pasarlos a php y asi cargar los valores directo al css, por medio del php.

webmatico.partner.mx

ahi tienes una muestra de lo que he hecho

IsaBelM · #13 (**permalink**) 19/05/2012, 05:15

Cita:

Iniciado por villano4

Entonces lo que hago es tomar los valores del ancho y alto del navegador con javascript, y redireccionar, pasarlos a php y asi cargar los valores directo al css, por medio del php.

todo esto será en base al ejemplo que muestras.

el punto está en modificar el css externo usando rules o cssRules y offsetHeight (para obtener el largo del area activa de la pantalla)

Cita:

.wrapper {
overflow:auto;
}

<body>
<script type="text/javascript">
if(document.all) {
document.styleSheets[0].rules[3].style['height'] = document.body.offsetHeight -140 +'px'; // ie
} else {
document.styleSheets[0].cssRules[2].style['height'] = document.body.offsetHeight -140 +'px';
}

como ves se usan dos indices. el primero (0) hace referencia a la hoja css y el segundo (3 y 2) hace referencia a la posición de regla en la hoja css

nota.- como verás, rules y cssRules tienen indices distintos. creo recordar que ie empieza a contar desde el 1 y los demás navegadores a partir del 0

villano4 · #14 (**permalink**) 23/05/2012, 19:59

@IsaBelM, ya te di +karma, pero no me basta, para decirte GRACIAS, con lo que me has enseñado, ha sido de gran utilidad, si pudiera te diria TE AMO, pero estoy casado, no tengo palabras para decirte GRACIAS, has sido una buena instructora.