CSS 动态垂直高度
我正在为我的网站设计新的布局，我希望用户能够更改视图。一个视图的静态高度为 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 */
}
I'm working on a new layout for my website and I want the user to be able to change views. One view is a static 540 pixels tall and horizontally/vertically centered. The second is no longer vertically centered and allows the content to define the height.
It's currently working with the first option, but in the second option, the utility column (2011 Browsers Usage Stats) does not fill the entire height. Is there a solution to this?
I don't know how much source code you want. I've listed a link to my website and the differences in CSS code below.
The first option (currently working):
#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 */
}
The second option (not working):
#floater {
margin-bottom: 0em; /* vertical top */
height: auto; /* vertical top */
}
#wrapper {
height: auto; /* vertical 100% */
}
#content {
height: 100%; /* dynamic height */
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
考虑一下你正在做的事情和你正在说的话：
您只能选择一个。您希望它充满整个高度还是动态的？
Consider what you're doing versus what you're saying:
You can only pick one. Do you want it to fill the entire height or be dynamic?