All geek questions in one place

How to make my column always stretch to the bottom of the page?

I need my content column to expand to the bottom of the page when the content is smaller than the viewport, but still expand when the content is larger. The column should deviate slightly from the top of the page.

Here is the HTML for what I described:

<html> <body> <div id="content"> <p> asdf ghjkl </p> </div> </body> </html>

Here is CSS

 #content { min-height: 100%; margin: 100px 0 0; }

The problem with this method is that min-height: 100%; doesn't take indentation into account, so the page is always bigger than I want.

This is the behavior I'm looking for:

desiredbehavior

Is there a way to do this without using Javascript?

+6
source share
5 answers

Absolute positioning can do this for you:

First remove the min-height and margin , then apply this rule to your CSS.

 #content { position: absolute; top: 100px; bottom: 0; }
+3
source

In CSS3 you can use box-sizing

By setting it to a border-box , you can force the browser to instead display a field with the specified width and height and add a border and padding to the field.

+1
source

Ok guys and birds, that’s what I ended up doing. Instead of solving the problem directly, I added a few fixers.

First of all, here are a few notes:

  • We know that when #column longer than the viewport, the length of #column must indicate the height of the <body> .

  • If #column shorter than the viewport, the height of the viewport should indicate the height of the <body> .

  • The column should stretch to the bottom of the page under any circumstances, no matter how long the content is.

For the first criteria, we need to make sure that height: auto set to <body> . Height defaluts if it is not installed. We also need to make sure #column has height: auto; and overflow: hidden; so that it expands to the size of its contents.

For the second criterion, we need to set position: absolute; and min-height: 100%; on <body> . Now the length of the <body> will expand if the #column larger than it, but not smaller than the viewport. This next part contains a fix.

For the third criterion, the trick is to add extra divs and give them special css. In my HTML, I added two #column right outside of #column .

 <div id="colhack-outer"> <div id="colhack-inner"> </div> </div> <div id="column"> ... </div>

For an external div, you set it absolutely and set it to a height of 100%, forcing it to use an alternative window model and moving its content area using the pad. You apply all your column style (background color, border radius, shadow, etc.) to the inner div. Here is the CSS that I applied to them:

 #colhack-outer { height: 100%; padding: <where you want to shift the column to>; position: absolute; width: 50%; } #colhack-inner { height: 100%; width: 100%; background-color: #303030; }

You should also use the container of actual content in this special box and move it with the addition:

 #contentbox { position: relative; padding: <where you want to shift the column to>; width: 50%; color: #EEEEEC; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Here's a live example: http://nerdhow.net/

post a comment if you have questions or something is unclear.

+1
source

Try this jsFiddle: http://jsfiddle.net/8R4yN/ . It seems to work the way you want. I got some tips from: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/ . It seems like overflow causes a hiding, but inside #content doesn't help either :).

0
source

You can achieve this by using Absolute Positioning and adding an extra block (if you need a solid background under the column).

0
source

Source: https://habr.com/ru/post/897508/

More articles:


All Articles