Layout CSS per intestazione fissa e altezza del contenuto del 100%?

Question

Sto cercando di ottenere un'intestazione di altezza fissa e un'area di contenuto che riempie lo schermo. Il contenuto div contiene una griglia telerik mvc. Ho provato alcuni suggerimenti su StackOverflow ma il controllo che è l'area del contenuto sembra sempre erroneamente dimensionato perché non tiene conto dell'altezza fissa dell'intestazione, quindi scorrerà il 40px in più se l'intestazione è 40px. Eventuali suggerimenti?

<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: Dovuto manualmente ridimensionare la griglia carico e finestra ridimensionare. Aggiungi

.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> 

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

Answer 2

Impostare l'esterno per essere al 100% di altezza, all'interno rendere il vostro fisso con l'intestazione e l'altezza automatica per il contenuto dovrebbe essere sufficiente.

per risolvere lo scorrimento, dare un'occhiata alla sovrabbondanza. visibile impedirà lo scorrimento.

Answer 3

Metti un margine superiore di 25 px sul content div e assicurati che il div del contenuto non includa l'intestazione.

Se il div del contenuto deve includere l'intestazione, creare un nuovo div per la griglia utilizzando le stesse proprietà sopra indicate.

Answer 4

È possibile inserire #header element all'interno dello #content element, l'elemento di contenuto avrà un'altezza del 100%.

Ecco un esempio, 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%; 
} 

Demo:

http://jsfiddle.net/Rz2tN/

Answer 5

Per Scorrimento verticale possiamo utilizzare il seguente e per scorrimento orizzontale basta usare un 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> 

aggiungere il seguente CSS

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

Questo è un lavoro in Firefox e in altri browser. Per IE basta usare il seguente codice

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

Questa è una soluzione molto semplice e penso che tutti la apprezzino.

Answer 6

Con box-sizing si può fare come

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

Non importa l'intestazione è in involucro o fuori involucro, funzionerà.

solo aggiungere:

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

Questo è più flessibile, la posizione del contenuto non è assoluta, ma hanno bisogno della proprietà box-sizing.

Circa l'box-sizing, ho definito meno funzione di daini:

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