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

问题

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 and have it's own scrollbar when it overflows. The problem is that the width of the content isn't being stretched to the right and I get a scroll bar in the middle of my page. I also can't get it to take up the rest of the remaining window height, if I set the height to 100% it wants to use the whole window height instead of what is left.

I'm only working with IE7 or better so need to worry about javascript and am not averse to using jQuery if it can solve this problem!

http://pastebin.com/x31mGtXr

回答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: 0 0 0 .5em;
}

回答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 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.

回答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.

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

<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>

来源：https://stackoverflow.com/questions/2789940/how-to-make-content-take-up-100-of-height-and-width

标签

jquery

html

css