HTML - Problemas con el height 100%

   
Vista:
Imágen de perfil de Sebastian

Problemas con el height 100%

Publicado por Sebastian sebastian_palivoda@hotmail.com (1 intervención) el 12/02/2015 19:54:41
buenas, hace un par de dias q estoy con eso y ya me frustre.
simplifique el codigo para q sea mas claro cual es el problema, capas alguno me puede dar una mano ya me ando desesperando
este es el html:
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
<!DOCTYPE html>
<html>
<head>
<!-- mi css -->
    <link rel="stylesheet" type="text/css" href="mine2.css">
    <title></title>
</head>
<body>
<div id="principal" >
    <nav id="menu">
        <ul >
            <li><a>Home</a></li>
            <li><a href="anime.html">Anime</a></li>
            <li><a href="manga.html">Manga</a></li>
            <li><a href="videojuegos.html">Videojuegos</a></li>
            <li><a href="noticias.html">Noticias</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
    </nav>
 
    <section  id="seccion">
        <h1>HOME</h1>
 
        <p>aca van cosas</p>
    </section>
</div>
 
</body>
</html>


este es el css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body{
 
	background-color: black;
	margin-left:8%;
	margin-right:8%;
 
}
 
#principal{
	background-color: white;
	width: 100%;
}
#seccion{
	height: 100%;
	width: 100%;
}


el tema es q el ancho si me lo toma como quisiera pero el alto no se modifica al 100%
si yo pongo por ejemplo height: 1000px; esto si funciona pero en porcentaje no hay caso.
alguna sugerencia?
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 xve

Problemas con el height 100%

Publicado por xve (1178 intervenciones) el 13/02/2015 08:09:35
Hola Sebastian, prueba tu código un poco modificado, haber si te sirve...

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
<!DOCTYPE html>
<html>
<head>
    <style>
    body{
        background-color: black;
        margin:0px auto;
        padding:0px 8px;
    }
    html,body {height:100%;}
 
    #principal{
        background-color: white;
        min-height: 100%;
        margin:0px;
    }
    #seccion{
    }
    </style>
    <title></title>
</head>
<body>
<div id="principal" >
    <nav id="menu">
        <ul>
            <li><a>Home</a></li>
            <li><a href="anime.html">Anime</a></li>
            <li><a href="manga.html">Manga</a></li>
            <li><a href="videojuegos.html">Videojuegos</a></li>
            <li><a href="noticias.html">Noticias</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
    </nav>
 
    <section  id="seccion">
        <h1>HOME</h1>
 
        <p>aca van cosas</p>
    </section>
</div>
 
</body>
</html>

Mira este código de ejemplo... creo que te servira:
http://www.lawebdelprogramador.com/codigo/CSS/2569-Como-poner-el-pie-de-pagina-al-final-de-pagina-con-HTML5-y-CSS.html
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

Problemas con el height 100%

Publicado por Shuniman acid.warrior@hotmail.com (1 intervención) el 13/02/2015 22:30:39
Hola Sebastián,

Creo que el problema parte que 'seccion' intenta buscar el 100% de un valor que no fué establecido. Osea , el 100% de cuanto?
Para que funcione deberías ponerle un valor al div padre, principal, en el height (que no sea porcentual).

Creo que si a 'principal' le ponés height:auto toma el navegador toma la altura acorde al contenido, y el porcentaje en el height que tiene 'seccion' tendría de donde agarrarse (no puedo corroborar esto último por que estoy en el trabajo XD).

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