Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » DIvs que se desbordan del body y html

CSS - DIvs que se desbordan del body y html

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 11
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por Tania (6 intervenciones) el 08/12/2017 20:56:36
Hola,
bien mi problema es el siguiente, tengo un div en la parte superior y dos debajo a la izquierda y derecha, estos 2 divs desbordan el body y html y se genera un scroll en mi página web, ese espacio parece ser del mismo alto del div superior, adjunto hoja de estilos y html.

Gracias por cualquier ayuda, ya probé de todo espero puedan ayudarme.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox
Val: 78
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por abzerox (21 intervenciones) el 09/12/2017 00:14:16
Hola Tania, hice unos pequeños cambios en tu CSS, la clave esta en la propiedad box-sizing, esta nos permite modificar las propiedades por defecto del CSS box model que calculan el alto y el ancho de los elementos. Tomando como valor border-box, el padding y el border se incluyen en el width y height.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-size: 16px;
}
 
html, body {
    height: 100%;
    min-height: 100vh;
}
 
body {
    background:#e0e0e0;

    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    border:1px solid #000000;

}
 
.contenedor {
    width:100%;
    height: 100%;
    max-height: 100vh;
    border:1px solid red;
    overflow: hidden;
}
 
header {
    border:1px solid #bcbfc4;

    overflow:hidden;
    width: 100%;
}
 
.menu {
    width:230px;
    height: 100%;
    float: left;
    border:2px solid #bcbfc4;

    background: #FFFFFF;

}
 
.contenido {
    height: 100%;
    background: #FFFFFF;

    border:2px solid #bcbfc4;

}

Nos comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 11
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por Tania (6 intervenciones) el 11/12/2017 23:37:38
Hola,

muchas gracias voy a probarlo ahora mismo, este es uno de varios issues en mi sistema.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por Tania (6 intervenciones) el 12/12/2017 15:40:38
Buenos días,

gracias por la respuesta abzerox pero aún tengo el problema :( , adjunto una imagen de como debe lucir la parte inferior de mi página web, aplicando los estilos de la solución sugerida con la propiedad overflow: hidden; en el div=contenedor lo que hace es cortar la parte inferior de los divs que se desbordan, pero para mi caso no funciona porque hay contenido que se extiende hasta el final de la página mientras uno va navegando por el sistema y como este estilo esconde o corta esa parte, ese contenido ya no se ve.

Gracias por la ayuda y espero puedan ayudarme a solucionar mi problema.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox
Val: 78
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por abzerox (21 intervenciones) el 13/12/2017 04:36:02
Hola, Tania.
Ya entendi lo que planteas, hize algunos cambios en tú código, quitando la propiedad overflow del div .contenedor y cambiando la propiedad max-height por min-height. A su vez también hize un pequeño cambio en la estrucutar html, ahora los divs con las clases .menu y .contenido tienen un contenedor padre .main, el cual si te fijas en el css tiene aplicada la propiedad display:flex lo cual lo convierte en una caja flexible. Como .menu tiene un ancho fijo el div .contenido debe tener la propiedad flex:1 para que ocupe el resto del ancho de su contenedor padre .main.

Nos comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por Tania (6 intervenciones) el 13/12/2017 23:51:49
Buenas tardes,

muchas gracias por la respuesta pero aún no se ve bien, probé el ejemplo en chrome, adjunto imagen. :(
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por Tania (6 intervenciones) el 19/12/2017 17:37:52
Buenos días,

siento responder con tanta demora, gracias por la respuesta abzerox pero aún no sale bien :( adjunto la imagen con la prueba en firefox (lado izquierdo) y chrom (lado derecho).
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox
Val: 78
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por abzerox (21 intervenciones) el 20/12/2017 04:21:10
Hola, Tania, lo que tu quieres es que tanto el div .menu como .contenido ocupen el 100% de la altura de su contenedor padre ?.
Prueba nuevamente con estos estilos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-size: 16px;
}
 
html, body {
    min-height: 100vh;
}
 
body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    border:1px solid #000000;

}
 
 
.contenedor {
    width:100%;
    min-height: 100vh;
    min-height: 100%;
    border:1px solid red;
}
 
.header,
.menu,
.contenido {
    border:1px solid #bcbfc4;

}
 
 
.header {
    width: 100%;
}
 
.main {
    display: flex;
}
 
.menu,
.contenido {
    height: 100%;
    min-height: 100vh;
    background: #FFFFFF;

}
 
.menu {
    width:230px;
    background-color: #e26c41;

}
 
.contenido {
    background: rgb(42, 190, 190);
    flex: 1;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

DIvs que se desbordan del body y html

Publicado por Tania (6 intervenciones) el 22/12/2017 21:05:43
Hola,
sí exactamente eso es lo que necesito, pero aún no he logrado darle solución, abzerox he probado los estilos que propusiste pero los 2 divs de "menu" y "contenido" se ponen uno debajo de otro en firefox y chrom, de todas formas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar