Mise en page CSS pour en-tête fixe et hauteur de contenu de 100%?

Je vais essayer d'obtenir une hauteur fixe-tête et d'une zone de contenu de la remplisse l'écran. Le contenu de la div contient un telerik mvc grille. J'en ai essayé quelques suggestions sur stackoverflow mais le contrôle qui est la zone de contenu semble toujours à la taille incorrecte car elle ne prend pas en compte l'en-tête à hauteur fixe, afin de faire défiler les extra 40px si l'en-tête est 40px. Toutes les suggestions?

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

Mise à JOUR:
Avait pour réactiver manuellement la taille de la grille sur la charge et de redimensionner la fenêtre.
Ajouter

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

source d'informationauteur NullReference

  1. 20

    DÉMO

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

    Vous pouvez placer le #header element à l'intérieur de la #content elementle contenu de l'élément va prendre 100% de la hauteur.

    Voici un exemple, en 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%;
}

    Démo:

    http://jsfiddle.net/Rz2tN/

  3. 2

    Avec box-sizing vous pouvez faire comme

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

    Peu importe l'en-tête est dans du papier d'emballage ou de wrapper, il va fonctionner.

    Seulement ajouter :

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

    C'est plus souple, la situation n'est pas absolue, mais il faut le box-sizing propriété.

    Sur le box-sizingj'ai moins de fonction que le daim:

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

    Jeu de l'extérieur pour être à 100% de la hauteur, à l'intérieur de rendre votre fixe avec en-tête, auto et de la hauteur du contenu devrait suffire.

    de fixer le défilement, jetez un oeil à la dépassement de propriété. visible permettra d'éviter le défilement.

  5. 1

    Mettre un 25px haut de la marge sur le div du contenu et assurez-vous que le contenu de la div ne pas inclure l'en-tête.

    Si le contenu de la div doit inclure l'en-tête, créer un nouveau div pour votre grille à l'aide des mêmes propriétés énoncées ci-dessus.

  6. 0

    De Défilement Verticale, nous pouvons utiliser la commande suivante et pour de défilement horizontale, il suffit d'utiliser 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>

    ajouter le suivant CSS

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

    C'est un travail dans Firefox et les autres navigateurs. Pour IE suffit d'utiliser le code CSS suivant

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

    C'est une solution très Simple et je pense que chacun d'en profiter.