0

我有一个类似于这样的页面结构：
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%，并且正在适应其内容。
你能帮助我吗？

4

2 回答 2

0

UPDATED

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

I've made some changes to your code that allows your content to fill 100% of the page. I also added in some large colored borders so you can easily see each container. Once you remove the borders - the containers will fill the page 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>
于 2013-10-30T16:26:33.067 回答
0

使您的容器 div 高度：自动和最小高度：100%。这将允许您的内容区域填充 100% 的标准化 css 浏览器的视口

于 2013-10-30T16:19:07.857 回答