Question

我一直在使用CSS height 属性，但我仍然无法找到解决方案。

这是我的CSS：

html{
    height: 100%;
}
body{
    margin:0px; 
    padding:0px; 
    min-height:100%;
}
#container{
    position: relative;
    padding:40px;
    margin-top:2%;
    background-color:rgba(0, 0, 0, 0.7);
    margin-bottom:2%;
    height:auto;
}

有没有办法使用CSS修复此问题，还是可以使用javascript函数？

Answer 1

如果您要完成的是创建一个延伸到页面底部的叠加层，请尝试将position属性更改为fixed并将高度设置为100％。

#container {
    position: fixed;
    height: 100%;
    /* other CSS properties */
}

Answer 2

你可以尝试设置身高：100％。或者您可以使用继承功能，因此它随html高度而变化。

html
{
  min-height: 100%;
  height:100%;
}

body{
 margin:0px; 
 padding:0px;
 height:inherit;
} 

#container{
  background-color:rgba(0, 0, 0, 0.7);
  height:inherit;
  border:1px solid #333;
 }

请检查小提琴：http://jsfiddle.net/rw99a/

如何强制div元素扩展到页面底部？

2 个答案: