?

Folter · #1 (**permalink**) 29/09/2010, 20:07

Hola! Tengo un dos divs absolutos, uno con sus tamanos en pixeles, y otro en porcentaje de alto y ancho, el problema es que el div con medidas en porcentaje sobre pasa al otro div. Hay alguna manera de que no suceda esto?

PHPau · #2 (**permalink**) 30/09/2010, 02:43

Con el overflow

Folter · #3 (**permalink**) 30/09/2010, 05:33

me puedes poner un ejemplo? gracias por la respuesta

_Adrian_ · #4 (**permalink**) 30/09/2010, 08:11

Hola. Puedes poner al div con problemas:

Código CSS:

Ver original{overflow:auto;}

Espero que te sirva,

jomaruro · #5 (**permalink**) 30/09/2010, 12:55

Hola:

Sería interesante que indicaras la URL o en su defecto publicaras el código para poder ayudarte mejor.

Saludos.

Folter · #6 (**permalink**) 30/09/2010, 16:00

tengo esto..

Código HTML:

Ver original<div id="window"></div>
<div id="bar"></div>

Código CSS:

Ver original#window {position:absolute; top:0px; left:0px; width:100%; height:100%;}
#bar {position:absolute; bottom:0px; left:0px; width:100%; height:30px;}

lo que quiero es que el #window ocupe todo sin sobrepasar el #bar, o sea 100% de height menos 30px

carmagedon · #7 (**permalink**) 30/09/2010, 16:20

Hola,

Probaste en poner ...

Código CSS:

Ver originalposition: relative; 
float: left;

En ambas clases? O bien, probá en jugar un rato con el height, poné en #window un alto estático, y andá fijandote como lo podés adaptar.
Sino vas a tener que utilizar javascript, para calcular el alto de la ventana, y luego a éste alto le restás el alto del #bar... de ésta forma tendrías tu valor dinámico con respecto a las dimensiones de la ventana sin importar que resolución tiene.

Saludos.

Folter · #8 (**permalink**) 01/10/2010, 07:03

Hola carmagedon, he probado lo que me dijiste y no funciona. He estado una hora o mas intentarlo areglarlo antes de consultarlo en el foro. En javascript tambien lo he intentado pero tengo poco conocimiento, tú sabrias como?

carmagedon · #9 (**permalink**) 01/10/2010, 07:13

Código CSS:

Ver original#window {
position: relative; 
float: left; 
width:100&#37;; 
height: 200px;
background-color: aqua;
}
#bar {
position:relative; 
float: left; 
width:100%; 
height:30px;
background-color: red;
}

Probalo así por ahora, a ver si te funciona. En teoría tiene que aparecer un div debajo del otro.

Saludos.

EDIT: Fijate que no sé porque acá en el FORO el % me aparece width:100%... te aviso por las dudas, eso es width: 100 porcentaje.

Folter · #10 (**permalink**) 01/10/2010, 12:42

funciona pero con 100% de height de #window no funciona :/

carmagedon · #11 (**permalink**) 01/10/2010, 19:17

Fijate ahí a ver que pasa..

Código HTML:

Ver original<html>
    <head>
        <title> test </title>
        <style type="text/css">
            .window {
                position: relative;
                float: left;
                width: 100%;
                background-color: aqua;
            }
            .bar {
                position:relative;
                float: left;
                width: 100%;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="window" id="idwindow"></div>
        <div class="bar" id="idbar"></div>
    </body>
    <script type="text/javascript">
        var contentHeightBar = 30;
        var contentHeightWindow = 0;
        var totalHeightWindows = window.innerHeight;
        contentHeightWindow = (totalHeightWindows - contentHeightBar);
        document.getElementById("idwindow").style.height = contentHeightWindow + "px";
        document.getElementById("idbar").style.height = contentHeightBar + "px";
    </script>
</html>

Cualquier cosa avisás.
Suerte.

mortiprogramador · #12 (**permalink**) 02/10/2010, 00:20

Hola
bastante explicativo el titulo del tema.... a la próxima pon solo un punto...
intenta con overflow:scroll;
saludos

jomaruro · #13 (**permalink**) 02/10/2010, 01:22

Hola:

Prueba este ejemplo

Código HTML:

Ver original<!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>
            ?
        </title>
        <style type="text/css">
            #window {
                position:relative;
                width:100%;
                height:100px;
                background-color:#f00;
                float:left;
            }
            
            #bar {
                position:relative;
                width:30px;
                height:100px;
                background-color:#00f;
                float:right;
            }
        </style>
    </head
    <body>
        <div id="window">
            <div id="bar"></div>
        </div>
    </body>
</html>

Saludos.

Folter · #14 (**permalink**) 03/10/2010, 12:00

muchas gracias carmagedon, es lo que necesitaba!

mortiprogramador, llamo mas la curiosidad con este titulo.. ^^

Colorea · #15 (**permalink**) 03/10/2010, 13:25

El titulo esta genial ^^

Impostor · #16 (**permalink**) 04/10/2010, 11:43

Cita:

Iniciado por Colorea

El titulo esta genial ^^

Sobre todo, cuando pase al tiempo y alguien necesite localizar este tema para ver como se solucionó.

Hay que leer cada cosa...

jomaruro · #17 (**permalink**) 04/10/2010, 13:19

Hola:

Cita:

Iniciado por Impostor

Hay que leer cada cosa...

Sii, por ejemplo:

Cita:

Iniciado por Folter

mortiprogramador, llamo mas la curiosidad con este titulo.. ^^

Y yo que no me di cuenta del título, la próxima vez que vea otro título parecido de Folter, ni le contesto.

Saludos.