Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery

How To Make Content Take Up 100% Of Height And Width

Post a Comment
I'm so close but I can't get this to work like I want it. I'm trying to get the header and the menu to always be visible and have the content take up the rest of the view screen an

Solution 1:

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: 000 .5em;
}

Solution 2:

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 heightleft: 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 topwidth: 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.

Solution 3:

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.

Solution 4:

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. :)

<styletype="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: 000 .5em;
        }
</style><scripttype="text/javascript">functionrez(){
            $('#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><divid="top"><tiles:insertpage='/WEB-INF/jsp/template/header.jsp'/><divid="top-space"style="border-bottom: gray solid 1em;"></div></div><divid="container"><divid="menu"><tiles:insertpage='/WEB-INF/jsp/template/menu.jsp'/></div><divid="content"><tiles:getname='content'/></div></div></body>

Post a Comment for "How To Make Content Take Up 100% Of Height And Width"