Inicio
Buscar
Ingresar
Registrarse
Starfield: el juego que revolucionará el espacio y la tecnología
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
div sale de el div padre
Imprimir
Páginas: [
1
]
Ir Abajo
Autor
Tema: div sale de el div padre (Leído 4693 veces)
$francisco
{ L6 } Flooder del foro
Mensajes: 781
div sale de el div padre
«
en:
Abril 15, 2015, 07:13:40 pm »
Muy buenas y saludos a todos.
código html:
Código: HTML5
<!DOCTYPE html>
<
html
lang
=
"es"
>
<
head
>
<
title
>
factura
<
/
title
>
<
meta
charset
=
"utf-8"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
>
<
/
head
>
<
body
>
<
div
id
=
"content"
>
<
div
id
=
"logo"
>
<
div
class
=
"imagen_logo"
>
EMPRESA
<
/
div
>
<
div
class
=
"datos_empresa"
>
<
p
>
EMPRESA S.L
<
/
p
>
<
p
>
calle
<
/
p
>
<
p
>
Numero
<
/
p
>
<
p
>
Localidad
<
/
p
>
<
/
div
>
<
/
div
>
<
div
class
=
"tabla"
>
<
/
div
>
<
/
div
>
<
/
body
>
<
/
html
>
código css:
Código: CSS
*
{
margin
:
0px
;
padding
:
0px
;
}
body
,
html
{
height
:
100%
;
}
#
content
{
width
:
95%
;
height
:
95%
;
background
:
grey
;
margin
:
0
auto
;
display
:
block
;
position
:
relative
;
top
:
2.5%
;
}
.datos_empresa
{
background
:
blue
;
margin-right
:
0px
;
position
:
absolute
;
right
:
0px
;
bottom
:
0px
;
}
.tabla
{
width
:
100%
;
height
:
100%
;
background
:
purple
;
}
#logo
{
background
:
red
;
position
:
relative
;
}
#logo
>
div
{
display
:
inline-block
;
}
.imagen_logo
{
font-size
:
75px
;
background
:
yellow
;
vertical-align
:
top
;
}
El caso es que el div con la clase "tabla" se sale de el div "content" la unica forma de ocultar lo es con:
Código: CSS
#
content
{
width
:
95%
;
height
:
95%
;
background
:
grey
;
margin
:
0
auto
;
display
:
block
;
position
:
relative
;
top
:
2.5%
;
overflow
:
hidden
;
<---------
}
y no creo que sea la manera mas correcta ¿hay alguna manera de que no salga de el div "content"?
En línea
Gus Garsaky
Visitante
Re:div sale de el div padre
«
Respuesta #1 en:
Abril 15, 2015, 10:37:14 pm »
No utilices 100% para el body y html, porque te ocupará mucho más que ello. Si quieres que el body o #content tenga el alto del navegador, utiliza 100vh.
Si te fijas, .tabla, está debajo de #logo, por lo que al darle 100%, éste tendrá el alto del padre (#content) mas el alto de #logo, por lo que se desborda.
Puedes solucionarlo con jQuery:
Código: Javascript
function
adaptHeight
(
)
{
var
bodyHeight
=
parseInt
(
$
(
"#content"
)
.
height
(
)
)
;
var
logoHeight
=
parseInt
(
$
(
"#logo"
)
.
height
(
)
)
;
$
(
".tabla"
)
.
height
(
bodyHeight
-
logoHeight
)
;
}
Es necesario llamar ésta función cuando carga el DOM y cada vez que se redimensione el navegador:
Código: Javascript
$
(
document
)
.
on
(
"ready"
,
function
(
)
{
adaptHeight
(
)
;
}
)
;
$
(
window
)
.
on
(
"resize"
,
function
(
)
{
adaptHeight
(
)
;
}
)
;
Yo lo haría de otra forma. Al body le pondría 100vh de alto y ya #content 100% con overflow: scroll. De ésta manera, la web siempre tendrá el alto del navegador, pero se podrá seguir visualizando el contenido desbordado por medio del scroll.
También #logo, lo mejor es que le coloques un display: flex y a .datos_empresa un display:flex y un flex-flow: column nowrap, para que los elementos se muestren en forma vertical. Por último, a #logo, le asignas un position: fixed. Si haces ésto, es necesario que le pongas un padding al body de 70px como lo hace bootstrap.
Tu código quedaría así:
Demo
Saludos.
«
Última modificación: Abril 15, 2015, 10:41:33 pm por Gus Garsaky
»
En línea
Imprimir
Páginas: [
1
]
Ir Arriba
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
div sale de el div padre
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more