No termino de entender el problema.
Te pego mi código (en el que he integrado la hoja de estilos dentro del HTML) y varias capturas.
Captura 1 (normal) Captura 2 (zoom alejado) Captura 3 (zoom acercado)
Código:
<!DOCTYPE html>
<html>
<head>
<style>body, html{
height: 100%;
margin: 0;
}
#contenedor{
width: 985px;
min-height: 100%;
margin: 0 auto;
height: 100%;
background: rgb(230, 236, 236);
box-shadow: 0px 0px 20px black;
border-radius: 6px;
box-sizing: border-box;
overflow: hidden;
}
section{
float: left;
width: 80%;
height: 100%;
min-height: 100%;
padding: 2%;
background: rgb(200,130,200);
border-radius: 6px;
box-sizing: border-box;
}
</style>
<title>Maqueta1</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="contenedor">
<section>
<h1>Sección principal</h1>
<p>
PRueba prueba
</p>
</section>
</div>
</body>
</html>
Si el problema está solucionado, se arregla poniendo el "height" tanto a la capa que quieres hacerle el 100% como a la que lo contiene.
Un saludo.