Foros del Web » Creando para Internet » CSS »

La duda de siempre: hacer que un bloque Div ocupe siempre una porción de la página

Estas en el tema de La duda de siempre: hacer que un bloque Div ocupe siempre una porción de la página en el foro de CSS en Foros del Web. Me refiero a que lo que quiero es dividir la pagina verticalmente. Poner Height: 100%; no funciona!. Solo ocupa el 100 por ciento de la ...
  #1 (permalink)  
Antiguo 08/09/2006, 10:28
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 11 años, 9 meses
Puntos: 2
La duda de siempre: hacer que un bloque Div ocupe siempre una porción de la página

Me refiero a que lo que quiero es dividir la pagina verticalmente.

Poner Height: 100%; no funciona!. Solo ocupa el 100 por ciento de la página al cargarse, pero luego las cosas que flotan a su derecha en Explorer lo que hacen es pegarse justo cuando este bloque acaba.

Lo que quiero es dividir en dos partes la pagina. La parte dle menú a la izquierda.

Demonios. como se hace para que un div sea infinito??, lo que necesite la pagina. Tiene que ser facil!!

gracias chicos.
  #2 (permalink)  
Antiguo 08/09/2006, 10:34
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
En vez de "100%" proba con "auto".
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #3 (permalink)  
Antiguo 08/09/2006, 11:43
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
ponle un div clear antes de cerrarlo :s o usa la técnica clearfix
  #4 (permalink)  
Antiguo 08/09/2006, 16:41
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 11 años, 9 meses
Puntos: 2
div clear?. harl. que es esorrr?.

No ha funcionado el auto, como suponía. Se queda en lo minimo. No se alarga infinito.

Debería de ser facil.
Voy a mirar lo del clear fix. gracias chicos.
  #5 (permalink)  
Antiguo 08/09/2006, 16:45
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 11 años, 9 meses
Puntos: 2
uff. demasiado para mi. Mucho texto y poco puedo sacar en claro. tiene que estar chupado!. A nadie se le ocurre una forma facil que hacer que dos bloques así?.

un bloque grande que ocupa todo, y que tiene un margen izquierdo del tamaño del menú. Dentro el menú pegado a la izquierda. Caramba, porqué no crece??... yo quiero que sea de la misma altura que el bloque grande! no vale auto, no vale 100%... que hago??
  #6 (permalink)  
Antiguo 08/09/2006, 23:16
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
aish... todos quieren bandeja de plata... solo tienes que copiar:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


en tu hoja de estilos, y al div contenedor de los flotados le pones class="clearfix"
  #7 (permalink)  
Antiguo 09/09/2006, 06:25
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 11 años, 9 meses
Puntos: 2
jo. lo siento es que tengo exámenes y no podía leerme todo. Lo he ojeado y había mucho código.

Gracias, de veras. Voy a probarlo ahora.
  #8 (permalink)  
Antiguo 09/09/2006, 06:30
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 11 años, 9 meses
Puntos: 2
No funciona.
Creo que es algo mas profundo esto...

He probado poniendolo el class en el menu de la izquierda y nada. He puesto una caja qeu contenga todo absolutamente todo y tampoco.

....

Tengo uqe ojear el css. CUando vea qeu ya no sé que demonios hacer escribo de nuevo.


Una cosa imoprtante:


Cuando pongo la web en IE el menú de la izquierda flota con la parte de la derecha.

En realidad no flotan, para intentar arreglar , puse que la parte de la derecha tuviera un margen del ancho del menú, para qeu así se lo saltara. Pero en IE el margen se lo come tambien el menú de la izquierda... agh..
  #9 (permalink)  
Antiguo 09/09/2006, 11:57
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
hola a mi tambien no me funciona con css.

aqui va el codigo haber si alguien lo corrige para que funcione

Código PHP:
<!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>footerStick Footer sticks to bottom of page</title>

<
style>
<!--
html,body {
    
height:100%;
}

#contenedor{
    
width700px;
    
heightauto;
    
background-color#999999;
}


#menu_izda{
    
floatleft;
    
width250px;
    
background-colorred;
    
heightauto;
}


#contenido{
    
floatright;
    
heightauto;
    
width450px;
    
background-color:#cccccc;
}

.
clearfix:after {
content".";
displayblock;
height0;
clearboth;
visibilityhidden;
}

/* Hides from IE-mac \*/
html .clearfix {height1%;}
/* End hide from IE-mac */
-->
</
style>

</
head>

<
body>

<
body>
 <
div class="clearfix" id="contenedor">

    <
div id="menu_izda">
    
Left Col<br>
    
This is content of the LEFT columnIt can be shortlonger or very longThis is content of the LEFT columnIt can be shortlonger or very longThis is content of the LEFT columnIt can be shortlonger or very long.
    </
div>


    <
div id="contenido">
        
Contenido<br>
        
This is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very long.
        
This is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very longThis is content of the MIDDLE columnIt can be shortlonger or very long.
    </
div>
</
div>
</
body>
</
html
  #10 (permalink)  
Antiguo 09/09/2006, 13:11
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
ok... cambia el menu_izda a:
<div id="menu_izda">
Left Col<br>
This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long.
<div style="clear:both; height: 1px; width: 100%;"></div>
</div>

Chécalo así...
  #11 (permalink)  
Antiguo 09/09/2006, 14:32
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 11 años, 9 meses
Puntos: 2
o sea que en el menu de la izquierda ponemos eso?.

A mi tampoco me funciona.

Creo que voy ap oner la estructura de mi web aqui, sin datos, para que veais. No entiendo nada. !! Como es posible que algo tan facil de hacer no salga?

Código:
<BODY>
	<div id="IZQUIERDA">
	     <div id="MENU_IZQ"></div>  
            (esta linea carga unos enlaces flotantes y un fondo en este bloque).
	   y aqui dentro va una lista de enlaces estilizados.
        </div>
	<div id="DERECHA">
                Cosas...
        </div> 
</body>
y aqui el css relativo a eso:

Código:
#IZQUIERDA{
   position: absolute;
   height: 100%;
   width: 350px;
   padding:0px;
   margin:0px;
   background-image:url(img/fondoRepeticionNuevaWeb.jpg); 

Ese fondo es el que debería estar repitiendose infinito.

   background-repeat:repeat-y;
   background-position:left;   
}

#MENU_IZQ{
   background-image:url(img/LogoYMenu.jpg);

Y esto es la imagen del menú que llevará unos enlaces flotantes.

   background-repeat:no-repeat;
   background-position:top left;
   height:700px;
}

#DERECHA{
   margin-left: 350px;
   padding-left: 15px;
   overflow: auto;
}
  #12 (permalink)  
Antiguo 09/09/2006, 15:40
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Cita:
Iniciado por jesusbet Ver Mensaje
ok... cambia el menu_izda a:
<div id="menu_izda">
Left Col<br>
This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long.
<div style="clear:both; height: 1px; width: 100%;"></div>
</div>

Chécalo así...

no funciona el div de la izquierda debería ajustar la altura al del contenido, osea el background rojo debería llegar hasta donde termina el otro div de contenido.
y no lo hace.
  #13 (permalink)  
Antiguo 09/09/2006, 18:12
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
probaron con Faux Columns??
  #14 (permalink)  
Antiguo 09/09/2006, 18:33
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 11 años, 9 meses
Puntos: 2
wwoooooooo! increible, amigo. gracias. voy a ver si me vale!!! miles de gracias. echadle un look el resto, es estupendo.
  #15 (permalink)  
Antiguo 09/09/2006, 18:51
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 11 años, 9 meses
Puntos: 2
No es mi caso. No me vale.

Mi fondo no se puede tilear.Neceisto que sea infinito hacia la derecha tambien.
Alguien da mas?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:38.