Question

我正在为我的网站制作新的布局，我希望用户能够更改视图。一个视图是静态540像素高和水平/垂直居中。第二个不再垂直居中，允许内容定义高度。

它目前正在使用第一个选项，但在第二个选项中，实用程序列（2011浏览器使用统计信息）未填充整个高度。有解决方案吗？

我不知道你想要多少源代码。我列出了一个指向我网站的链接以及下面CSS代码的差异。

第一个选项（目前有效）：

#floater {
    margin-bottom: -27em; /* vertical center - half of container's height */
    height: 50%; /* vertical center */
}
#wrapper {
    height: 54em; /* vertical center */
}
#content {
    height: 33em; /* static height */
}

第二个选项（不工作）：

#floater {
    margin-bottom: 0em; /* vertical top */
    height: auto; /* vertical top */
}
#wrapper {
    height: auto; /* vertical 100% */
}
#content {
    height: 100%; /* dynamic height */
}

Answer 1

考虑一下你正在做什么和你说的话：

#content {
    height: 100%; /* dynamic height */
}

但在第二个选项中，实用程序列（2011浏览器使用统计信息）未填满整个高度

你只能选一个。你想让它填满整个高度还是充满活力？

CSS动态垂直高度

1 个答案: