Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I followed this guide to help setup the columns for my page.

What I'm trying to do is to make the my columns fill the screen if the screen is larger than the content, but when the content is longer than the browser screen can show at once, use the default overflow scroll or auto.

Currently, I have the body, my container (a div around the containers described in the article), and the containers described in the article set to height: 100%. This is fine when the page fits all the content, but when the screen is too small, the content just cuts off.

I tried fixing this by changing the body or my container to min-height to 100% and although this makes the smaller screen show everything again, in the larger screens, the 2 columns "backgrounds" do not extend to the bottom of the page, but my container does.

Edit: my html and body are also set to height 100% currently.

Edit2: here's a jsfiddle for what it looks like when the content is larger than the screen

Now the structure is something like:

body (height: 100%)
    my_container (height: 100%)
        container2 (height: 100%)
            container1 (height: 100%)
                column1
                column2

I'd like it do be something like

body
    my_container (min-height: 100%)
        container2 (height: 100%)
            container1 (height: 100%)
                column1
                column2 
share|improve this question

1 Answer 1

Just remove height: 100%; from your CSS.

http://jsfiddle.net/8DNmh/2/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.
{"cc_re__cc_re__cc_by_sa_3_0": ["sites in the Stack Exchange network\">Area 51</a></li>\r\n                        <li><a href=\"//careers.stackoverflow.com?utm_source=stackoverflow.com&amp;utm_medium=site-ui&amp;utm_campaign=footerlink\">Stack Overflow Careers</a></li>\r\n                    \r\n                </ol>\r\n            </td>\r\n    </tr>\r\n</table>\r\n                </div>\r\n            </div>\r\n\r\n            <div id=\"copyright\">\r\n                site design / logo &#169; 2014 stack exchange inc; user contributions licensed under <a href=\"http://creativecommons.org/licenses/by-sa/3.0/\" rel=\"license\">cc by-sa 3.0</a> \r\n                with <a href=\"http://blog.stackoverflow.com/2009/06/attribution-required/\" rel=\"license\">attribution required</a>\r\n            </div>\r\n            <div id=\"svnrev\">\r\n                rev 2014.9.15.1858\r\n            </div>\r\n            \r\n        </div>\r\n    </div>\r\n    <noscript>\r\n        <div id=\"noscript-warning\">Stack Overflow works best with JavaScript enabled<img src=\"http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif\" alt=\"\" class=\"dno\"></div>\r\n    </nos"], "copyright__copyright__copyright": ["ike\n\nbody\n    my_container (min-height: 100%)\n        container2 (height: 100%)\n            container1 (height: 100%)\n                column1\n                column2 \nshare|improve this question\n\n1 Answer 1\n\nJust remove height: 100%; from your CSS.\n\nhttp://jsfiddle.net/8DNmh/2/\n\nshare|improve this answer\n\nYour Answer\n\n\u00a0\ndiscard\n\nBy posting your answer, you agree to the privacy policy and terms of service.\n\nNot the answer you're looking for? Browse other questions tagged or ask your own question."]}