Question

我的页面结构与此类似：
的 CSS ：

html,body{
    height: 100%;
    border: 1px solid;
    box-sizing: border-box; 
}
#pagina{
    height: 100%;
}
#list{
    height: 100%;
}
.persona{
    border: 1px solid;
    height: 40%;
}

HTML：

<div id=pagina>
<div id=list>
    <div class="persona">Prova</div>
    <div class="persona">Prova</div>
    <div class="persona">Prova</div>
</div>

我希望页面的高度为100％，并且它正在适应其内容你能救我吗？

Answer 1

使你的容器div高度：auto和min-height：100％。这将允许你的内容区域填充标准化css浏览器的视口的100％

Answer 2

<强>已更新

http://jsfiddle.net/hdrenollet/aFzw5/

我对您的代码进行了一些更改，允许您的内容填充100％的页面。我还添加了一些大的彩色边框，这样你就可以轻松看到每个容器。删除边框后 - 容器将填充页面100％;

<head>
    <title></title>
    <script>
    </script>
    <style>
        html{
            height:100%;
            border:10px solid red;
        }
        body{
            height:100%;
            border:10px solid yellow;
        }
        #pagina{
            height: 100%;
            border:5px solid black;
        }
        #list{
            height:100%;
            border:5px solid green;
        }
        .persona{
            border:5px solid blue;
            height: 30%;
        }
    </style>
</head>
<body>
    <div id="pagina">
        <div id="list">
            <div class="persona">Prova</div>
            <div class="persona">Prova</div>
            <div class="persona">Prova</div>
        </div>
    </div>
</body>

集装箱100％并扩大

2 个答案: