圣杯布局与100％的高度 [英] Holy grail layout with 100% height

问题描述

我想要创建一个类似这样的CSS布局

I am trying to make a css layout that looks like this

我认为这种类型的布局的CSS术语被称为圣杯。我面临的问题是，当我使用布局和解决方案，我发现在线我不能让他们正常工作，因为我想要他们。我想做的是一个页面，无论内容，将有页脚在浏览器的底部，列向下延伸到它。到目前为止，我只看到页脚放置在内容停止的页面，结果是页脚下有一些空白。

The CSS term for this type of layout is known as the "holy grail" I think. The problem I am facing is that when I use layouts and solutions I find online I do not get them to work properly as I want them to. What I am trying to do is make a page that, regardless of content, will have the footer at the bottom of the browser and the columns stretching down to it. So far I have only seen pages that have the footer placed where the content stop, the result is some blank space under the footer.

如果任何人可以帮助我非常感谢！

If anyone could help me out on this it would be greatly appreciated!

推荐答案

对于两个边栏使用以下内容：

Use the following for the two sidebars:

padding-bottom:9999px;
margin-bottom:-9999px;

这会创建隐形内容，允许侧边栏一直延伸到底部负边距标准化边栏尺寸，以便在边栏上执行的计算仍然有意义）。

This creates "invisible" content which allows the sidebars to stretch all the way to the bottom (and the negative margin "normalizes" the sidebar dimensions so that calculations carried out on the sidebar still make sense).

这篇关于圣杯布局与100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！