我正在尝试获得一个固定的高度标题和一个内容区填充屏幕.内容div包含telerik mvc网格.我已经尝试了一些建议在stackoverflow,但是内容区域的控件总是似乎不正确的大小,因为它不考虑标题固定高度,所以如果标题是40px,它将滚动额外的40px.有什么建议么？
<div id="header"> </div> <div id="content"> <telerik mvc grid control> </div>
CSS
html,body
{
margin:0;
padding:0;
height:100%;
}
#header {
position:absolute;
height: 40px;
left:0;
top:0;
width:100%;
background:green;
}
#content {
position: absolute;
top:40px;
left:0;
width:100%;
height:100%;
background:#eee;
}
更新：
必须在加载和窗口重新大小时手动重新调整网格大小.
加
.ClientEvents(events => events.OnLoad("resizeGrid"))
<script type="text/javascript">
window.onresize = function () {
resizeContentArea($("#Grid")[0]);
}
function resizeGrid(e) {
debugger;
resizeContentArea($("#Grid")[0]);
}
function resizeContentArea(element) {
var newHeight = parseInt($(element).outerHeight(),10) - parseInt($(".t-grid-header",element).outerHeight(),10) - parseInt($(".t-grid-pager",10);
$(".t-grid-content",element).css("height",newHeight + "px");
}
</script>
解决方法
DEMO
HTML
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>
CSS
html,body {
height:100%;
margin:0;
padding:0;
}
#wrapper {
width:400px; /*set to desired width*/
height:100%;
margin:auto;
position:relative;
}
#header {
height:40px; /* set to desired height*/
}
#content {
position:absolute;
bottom:0;
top:40px; /*must match the height of #header*/
width:100%;
overflow:auto;
}
