在CSS 中如何使用百分比设置页面 Div 高度？

一个登陆界面的文档结构大致如下：
<div class="login_wrapper">
<div class="login_header"></div>
<div class="login_content"></div>
<div class="login_footer"></div></div>其中login_header和login_footer无文字内容，只有一个背景颜色，颜色区别于login_content，login_content是登录界面的主模块，用户填用户名和密码。
现在为了保证不同屏幕下显示效果相同，div的高度使用百分比设置。body和login_wrapper的高度为100%，以保证本页面充满浏览器并且不会翻页。同时设置login_header和login_footer的高度为20%，content为60%。但是如此设置，浏览器只能显示content的内容，header和footer高度均为0px。无法达到本来的初衷。很奇怪，不知应该如何解决上述的问题。本回答被提问者采纳