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

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

12 голосов
/ 22 июня 2011

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

Ответы [ 6 ]

20 голосов
/ 22 июня 2011

ДЕМО

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 голосов
/ 24 июля 2013

С 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, я определил функцию less как пар: 

.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);
}
2 голосов
/ 22 июня 2011

Вы можете разместить #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/

1 голос
/ 22 июня 2011

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

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

1 голос
/ 22 июня 2011

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

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

0 голосов
/ 06 июля 2012

Для вертикальной прокрутки мы можем использовать следующее, а для горизонтальной прокрутки просто используйте 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;
}

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

...