如何使内容占据高度和宽度的100％ [英] How to make content take up 100% of height and width
问题描述
我是如此亲密，但是我无法像我想要的那样使它正常工作.我试图使标题和菜单始终可见，并使内容占据视图屏幕的其余部分，并在溢出时使用其自己的滚动条.问题在于内容的宽度没有向右拉伸，并且在页面中间出现了滚动条.如果将高度设置为100％，它也希望使用整个窗口的高度而不是剩余的高度.
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.
我仅使用IE7或更高版本，因此需要担心javascript，如果可以解决此问题，则不反对使用jQuery！
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!
推荐答案
对于所有好奇的人来说，这就是它的结局.我不得不使用一些jQuery作弊，但是它成功了，现在当我调整大小时看起来也很棒.:)
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>
这篇关于如何使内容占据高度和宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
