problema height 100%

rottenp4nx · #1 (**permalink**) 25/03/2015, 16:00

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rebelArte</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    html{
        width: 100%;
        height: 100%;
    }
    body{
        background-color: #282828;
        width: 100%;
        height: 100%;
    }
    #container{
        display: block;
        width: 94%;
        height: 94%;
        margin: 3% 3%;
        background: #fff;
        min-height: 100%;
        
    }
</style>
<body>
    <div id="container">Hola Mundo!</div>
</body>
</html>

Teoricamente, solo se debería rellenar y no que aparezca el scrollbar vertical
porque el body tiene 100% de altura y el hijo div container tiene 94% de alturo más los margenes de arriba y abajo de 3%, dan los 100% de altura y produce el scrollbar, me parece raro.
De antemano gracias :)

AngelKrak · #2 (**permalink**) 25/03/2015, 16:19

no soy un experto en CSS pero porque 100% en html y body, si el container tiene 94%

en todo caso ponle 94% tanto al Body, como al HTML igual que al Container (ese es tu problema)

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rebelArte</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    html{
        width: 100%;
        height: 94%;
    }
    body{
        background-color: #282828;
        width: 100%;
        height: 94%;
    }
    #container{
        display: block;
        width: 94%;
        height: 94%;
        margin: 3% 3%;
        background: #fff;
        min-height: 100%;
        
    }
</style>
<body>
    <div id="container">Hola Mundo!</div>
</body>
</html>

Demo:
http://codepen.io/AngelKrak/pen/WbPYRq

rottenp4nx · #3 (**permalink**) 25/03/2015, 16:41

es que pienso:
El padre body -> 100% H
y el hijo div -> 94% H con 3% margin top y margin bottom 3%
debería quedar al centro de la pantalla

Gracias por tu ayuda, probaré :)

pzin · #4 (**permalink**) 25/03/2015, 17:11

Si le pones una altura mínima de 100% pues te medirá al menos 100%.

rottenp4nx · #5 (**permalink**) 25/03/2015, 18:20

sin eso también pasa, se me olvidó sacarlo del código jajaj

ZoroRoronoa · #6 (**permalink**) 25/03/2015, 19:12

al body ponle height:100%; en lugar de 94
y al #container, quitale ese min-height:100%;