CSS-макет для фиксированного заголовка и 100% -ной высоты контента?

Я пытаюсь получить заголовок с фиксированной высотой и область содержимого, заполняющую экран. Содержимое 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>

Ответы

Ответ 1

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

Ответ 2

Вы можете разместить #header element внутри #content element, элемент контента займет 100% высоты.

Вот пример, HTML:

<div id="content">
     <div id="header">
        Header.
    </div>
    Content Area.
</div>

CSS

body,html {
    height:100%;
    margin:0;
    padding:0;
}

#header {
    background:#666;
    height:30px;
}

#content {
    height:100%;
    background:#999;
    width:100%;
}

Демо:

http://jsfiddle.net/Rz2tN/

Ответ 3

С box-sizing вы можете сделать, например

http://jsfiddle.net/Wener/Vat4C/1/

Независимо от того, что заголовок находится в оболочке или из оболочки, он будет работать.

Добавлять только:

#wrapper
{
    box-sizing: border-box;
    padding-top: 40px;
    margin-top: -40px;
}
#header
{
    /* add this if header out of wrapper */
    position: relative;
    z-index: 9;
}
#content
{
    /* remove
    position:absolute;
    bottom:0px;
    top: 40px;*/

    /* add */
    height: 100%;
}

Это более гибко, позиция содержимого не является абсолютной, но для этого требуется свойство box-sizing.

О box-sizing я определил меньшую функцию как пар:

.box-sizing(@type: content-box) {
    -webkit-box-sizing: @type; /* <=iOS4, <= Android  2.3 */
    -moz-box-sizing: @type; /* Firefox 1+ */
    box-sizing: @type; /* Chrome, IE8+, Opera, Safari 5.1*/
}

.border-box()
{
    .box-sizing(border-box);
}

Ответ 4

Установите внешнюю высоту 100%, внутри сделайте свой фиксированный заголовок, а авто высота для содержимого будет достаточной.

чтобы исправить прокрутку, посмотрите на оперение переполнения. видимый предотвратит прокрутку.

Ответ 5

Поместите верхний край 25px в div контента и убедитесь, что в div содержимого нет заголовка.

Если содержимое div должно включать заголовок, создайте новый div для вашей сетки, используя те же свойства, которые были указаны выше.

Ответ 6

Для вертикального прокрутки мы можем использовать следующие и для горизонтальной прокрутки просто использовать div

<div class="DataGridXScroll">

@(Html.Telerik().Grid(listCustomerStatus)
                .Name("grvSalesAdjustment")
                .DataKeys(keys => keys.Add(k => k.CustCode))
                .Columns(column =>
                {

                })
               .Selectable()
               .Pageable(page => page.PageSize(100))
               .Scrollable(scroll => scroll.Height(300))
)
 </div>

добавьте следующий CSS

.DataGridXScroll
{
    width: 1000px;   
    overflow-x: scroll;
    text-align:left;
}

Это работа в Firefox и в другом браузере. Для IE просто используйте следующий CSS

.t-grid
{
   position: static;
   overflow:hidden;
}

.t-grid-content
{
   overflow-x: hidden;
   position:static; 
   width:100%;  
}

.t-grid-header-wrap
{
   position:static;    
}

.t-grid-content
{
   overflow-x: hidden;    
}

.t-grid-footer-wrap
{
  position:static;
}

Это очень простое решение, и я думаю, что каждому это нравится.