Question

I have a div that is styled height:100%. I would like the height to be 100% of the browser window, plus an additional 32px at the bottom, which will be cut off (along with its content). Is this possible? I searched, but it seems most people try to avoid this, not create it. A pure CSS solution would be preferable, but I’ll try javascript or jquery if it’s the only way.

Thanks in advance!

Clarification: There will be content within the div that I am trying to crop off, about 32px worth. So adding padding or any kind of blank space isn’t quite what I’m looking for. Thanks.

Answer 1

Inspired by @Steve’s answer you can set a height implicitly with position: absolute and setting both top and bottom values. In this case:

HTML:

<div class="content"></div>

CSS:

html,body { height: 100%; }

.content {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: -32px;
}

Example: http://jsfiddle.net/blineberry/qpvum/