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 c开发者_如何学运维an solve this problem!
http://pastebin.com/x31mGtXr
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;
}
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.
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.
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>
加载中,请稍侯......
精彩评论