如何获得固定面板<div>的窗口全高度

时间:2016-02-06 05:57:22

标签: html css

我的HTML布局中有左右面板。我的左侧面板位置为fixed,右侧面板为absolute且可滚动。现在我希望我的左侧面板在窗口高度时填充颜色,因为它是固定的。如何使左侧面板填充颜色到窗口底部。

2 个答案:

答案 0 :(得分:1)

因为我们不知道您的HTML结构或CSS代码,所以我试图模仿&#34;你的情况,因为你没有提供任何代码,当然你应该做的我真的很想知道你的问题是如何仍然存在并且还没有被删除。

但是,您可以使用以下方法之一来实现它:

  1. #left-panel { height:100%; position: fixed;} 设置为左侧面板,如此JS Fiddle 1

    vh
    1. 使用viewport units vw100vh,其中#left-panel { height:100vh; position: fixed; } 是全窗口高度,就像这样: JS Fiddle 2

      top:0
      1. 您可以设置bottom:0height,而不是设置#left-panel { top:0; bottom:0; position: fixed; } 属性,如下所示:
        JS Fiddle 3

        perform

答案 1 :(得分:0)

将以下css添加到右侧DIV。 此外,右侧DIV有一些固定的高度。

.container-props {
    position: relative;
    box-sizing:border-box;
    overflow:auto;
}

这将向右侧DIV添加一个滚动条。 我认为这就是你要找的东西。