CSS layout: vertical extension of a page

微信扫一扫,分享到朋友圈

CSS layout: vertical extension of a page

This is the page I am working on right now: http://jsfiddle.net/0xsven/hycRx/

I want the page to expand vertically to fill the whole screen so that the footer is always at the very bottom. I am not searching for a sticky footer! I want the page to expand to the bottom like in this picture
.

Any idea if this is possible?

Update

I used some confusing words so I am trying to clarify my question:

I want my page to always fill out the viewport vertically, even if there is not enough content. As soon as there is enough content to even extend the viewport the page should be scrollable. In my tests a sticky footer always stays at the bottom of the viewport covering other elements, which I don’t want to happen.

One solution I came up with is manipulating/resizing the paddings/margins with jquery so it fits the viewport. But I dislike using javascript for such things.

You can experiment with the position attribute, like this:

#footer{
background-color: #222;
position: relative;
bottom: 0;
}

微信扫一扫,分享到朋友圈

CSS layout: vertical extension of a page

JPA Criteria Metamodel Generation and Usage Guide

上一篇

Refinitiv:2020年Q1全球并购活动仅6980亿美元 下降28%

下一篇

你也可能喜欢

CSS layout: vertical extension of a page

长按储存图像,分享给朋友