使div填充整个页面的高度

Question

I have a page with this structure: 我有一个具有以下结构的页面：

topbar (100% width) sidebar content 顶栏（宽度为100％）的侧栏内容

i want the sidebar to fill all the remaining space of the screen in height. 我希望边栏填充屏幕上所有剩余的高度。

I've tried with height: 100% in my css but doesn't work. 我尝试了高度：css中100％的高度，但是不起作用。

How can i do this? 我怎样才能做到这一点？ There is a way to do it using css or i have to use Javascript? 有一种方法可以使用CSS来完成，或者我必须使用Javascript？

Answer 1

To achieve this you need make sure the sidebar's parent containers have heights of 100%, too. 为此，您需要确保边栏的父容器的高度也为100％。

So, if you have a sidebar div, you have the body container, and the html container. 因此，如果您具有侧边栏div，则将具有body容器和html容器。

html, body, #sidebar { height: 100%; }

Answer 2

Have you set the height of body height to 100% too? 您是否也将身高的高度设置为100％？ If not it won't fill up the rest of the page. 如果没有，它将无法填满页面的其余部分。