html – 如何使一个div 100%的窗口高度?

前端之家收集整理的这篇文章主要介绍了html – 如何使一个div 100%的窗口高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我只想有一个侧边栏将是窗口高度的100%,但除此之外没有任何作用:
  1. #sidebarBack {
  2. background: rgba(20,20,.3);
  3. position: fixed;
  4. width: 250px;
  5. height: 100%;
  6. left: 0;
  7. }

我不想有位置:固定,因为我有水平可滚动的内容,所以一个固定的部分将保持,很好,固定.

有没有办法做这样的事情,也许有相对或绝对的地位?

这是一个快速的小提琴只是为了测试和解释:
JSFiddle

解决方法

tl; dr – 添加html,body {height:100%;}到你的CSS.

CSS中的百分比值从已经声明高度的一些祖先继承.在你的情况下,你需要告诉你的边栏的所有父母的身高是100%.我假设#sidebarBack是身体的直接孩子.

本质上来说,您的代码正在告诉#sidebarBack为其父级的100%高度.它的父(我们假设)是body,所以你需要设置height:100%;身体也好.然而,我们不能停下来身体从html继承高度,所以我们还需要设置height:100%;在html上.我们可以在这里停下来,因为html从viewport中继承了它的属性,它已经声明了100%的高度.

这也意味着如果最后将#sidebar放在另一个div中,那么该div还需要height:100%;.

这是一个Updated JSFiddle.

将您的CSS更改为:

  1. html,body {
  2. height:100%;
  3. }
  4.  
  5. #sidebar {
  6. background: rgba(20,.3);
  7. width: 100px;
  8. height: 100%;
  9. left: 0;
  10. float:left;
  11. }
  12.  
  13. section#settings {
  14. width:80%;
  15. float:left;
  16. margin-left:100px;
  17. position:fixed;
  18. }

猜你在找的HTML相关文章