Я пытаюсь получить заголовок с фиксированной высотой и область содержимого, заполняющую экран. Содержимое div содержит сетку telerik mvc. Я попробовал несколько предложенных в stackoverflow, но элемент управления, который является областью содержимого, всегда кажется неправильным, потому что он не учитывает фиксированную высоту заголовка, поэтому он будет прокручивать дополнительные 40 пикселей, если заголовок имеет 40 пикселей. Какие-либо предложения?
<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;
}
UPDATE: Если бы вручную изменить размер сетки при загрузке и изменении размера окна. Добавить
.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", element).outerHeight(), 10);
$(".t-grid-content", element).css("height", newHeight + "px");
}
</script>