ansaurus

Question

How to make content take up 100% of height and width

Answer 1

+4 A:

Like this?

html, body {
    height: 100%;
    font-family: 'Calibri','Tahoma','Arial', sans-serif;
    font-size: 14px;
    margin:0;
    padding:0;
}
#container{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#content {
    min-height: 100%;
    overflow: auto;
    height:90%;
    float: left;
    margin-left:12em;
    border-left: black solid 1px;
    padding: 0 0 0 .5em;
}

rebus 2010-05-07 16:31:00

Close but I still get a scrollbar in the middle of the browser when the content overflows.

Hiro2k 2010-05-07 17:04:12

If you get horizontal scrollbar you could try to put some `width` on `#content`. I am terribly sorry but i dont have IE7 handy at the moment to test this, but also note that this does not work in Chrome (with `width` on `#content` set in %, but it works if you set it in px or em.)

rebus 2010-05-07 17:29:56

I'm getting the vertical scrollbar in the middle of the window. I can set the #content width, but how do I know how much space is necessary to fill up the rest of the window?

Hiro2k 2010-05-07 17:47:31

You can try putting it 50% or something, just to se if the scrollbar goes away.

rebus 2010-05-07 17:58:34

Answer 2

+1 A:

Remove the float declaration on the "content" div and it will stretch to fit the parent width, remove the margin on that same div because it's unnecessary and is causing the Chrome issue.

Re: the height issue... is the "top" div a defined height? If so, you could have a setup like the (albeit kinda dirty) following:

#container {
    height: 100%;
    position: relative;
    width: 100%;
}
#top {
    height: 100px; // assumes top has a defined height
    left: 0;
    position: absolute; // lay it on top of the page
    top: 0;
    width: 100%;
}
#menu {
    float: left;
    margin-top: 100px; // push content down by value of top
    width: 12em;
}
#content {
    height: 100%;
    overflow: auto;
}
#topSpacer {
    height: 100px; // push content down by value of top
}

Then just add the spacer to the content well:

<div id="content"><div id="topSpacer"></div></div>

If you are strict about your semantics, or the "top" div is of varying width, then you could generate a JavaScript solution where you set the height of "content" to the height of "top" + (the viewport height - "top") on load and when the browser is resized. Pretty trivial to do with a framework like jQuery, not so much without one.

Andrew 2010-05-07 18:11:38

This should work i think. It doesn't make difference in FF and it still wont work in Chrome but it should sufice for IE.

rebus 2010-05-07 18:21:19

Yes, the scrollbar on the right goes under the browser, it's kinda of hard to describe. Here is a pic.http://img687.imageshack.us/img687/4526/22037006.png

Hiro2k 2010-05-07 18:42:42

As Billy said, remove the margin too, that will fix issues in Chrome. Also, see the updated post about the issue in the screenshot.

Andrew 2010-05-07 18:46:21

Just so we are all clear, this is the current version of the document that I have and it's exhibiting the behavior en screen shot in Chrome, Firefox and IE7. pastebin.com/FiUC0zcC

Hiro2k 2010-05-07 19:29:03

Yep, I see what you mean now. See updated answer above.

Andrew 2010-05-07 19:37:48

Answer 3

A:

take off your left margin. When a floated element contains padding on the same side as it is floated, IE will double the margin. Add it to padding or better yet, to the padding of the element it contains.. like P.

Billy 2010-05-07 18:35:55

I did remove the margin, and replaced it with a 1em padding. I forgot to mention that.

Hiro2k 2010-05-07 18:44:11

Just so we are all clear, this is the current version of the document that I have and it's exhibiting the behavior en screen shot in Chrome, Firefox and IE7.http://pastebin.com/FiUC0zcC

Hiro2k 2010-05-07 18:55:35

Answer 4

A:

This is how it ended up for anyone that is curious. I had to cheat using some jQuery, but it did the trick and now it looks great when I resize it as well. :)

<style type="text/css">
        html, body {
            height: 100%;
            font-family: 'Calibri','Tahoma','Arial', sans-serif;
            font-size: 14px;
            overflow: hidden;
        }
        #top{
            width: 100%;
        }
        #container{
            width: 100%;
            overflow: auto;
        }
        #menu {
            float: left;
            width: 12em;
        }
        #content {                
            overflow: auto;
            border-left: black solid 1px;
            padding: 0 0 0 .5em;
        }
</style>

<script type="text/javascript">
        function rez(){
            $('#content').css('height', $(window).height()-$('#top').height());
            $('#content').css('min-height', $('#menu').height());                
            $('#container').css('height', $(window).height()-$('#top').height());
        };
        $(window).resize(function() {
          rez();
        });
        $(window).load(function () {
          rez();
        });
</script>


<body>
    <div id="top">
        <tiles:insert page='/WEB-INF/jsp/template/header.jsp'/>
        <div id="top-space" style="border-bottom: gray solid 1em;"></div>
    </div>        
    <div id="container">            
        <div id="menu">
            <tiles:insert page='/WEB-INF/jsp/template/menu.jsp'/>
        </div>
        <div id="content">
            <tiles:get name='content'/>
        </div>
    </div>
</body>

Hiro2k 2010-05-07 22:14:00

ansaurus

tags:

views:

answers:

How to make content take up 100% of height and width

related questions