Le conteneur HTML dépasse la hauteur de la fenêtre

Question

J'utilise kendo ui et boostrap v3.

J'ai un conteneur pour mon menu supérieur et un récipient pour mon contenu principal (id = diviseur).

Hauteur de la fenêtre est égale à 981px, mais au lieu de diviser la hauteur pour les conteneurs, les réserves de contenu principal 981px et le menu du haut 53px, qui résume à 1014px.

Mais il devrait y avoir la répartition suivante ->53px pour menu du haut et 928px pour le contenu principal. Je ne sais pas comment faire ça. J'ai déjà essayé de calculer la hauteur avec "calc (100% - 53px)", mais cela ne fonctionne pas.

Ceci est ma structure html:

<div id="wms-app" style="height: 100%;"> 
    <div style="height: 100%;"> 
     <div id="wms-content" style="height: 100%;"> 
      <div id="mainmenu" class="k-content"></div> 
      <div id="splitter" class="k-content" style="height: 100%;"> 
      </div> 
     </div> 
    </div> 
</div> 

Solution:

En fin de compte, il a également collaboré avec l'option calc (..):

#splitter {style="height: calc(100% - 53px);"} 

J'ai oublié de recharger tout car le framework kendo recalcule les hauteurs du splitter après le chargement de la page.

Answer 1

Comme vous le savez peut-être:

hauteur de 100% définit un élément à prendre chaque pixel disponible de la taille, de sorte que le comportement est correct.

En fonction de ce résultat final et la méthode que vous privilégiez, je vois trois solutions:

Une solution est de mettre le topmenu à

position: fixed; 
top: 0; 

Cela devrait rendre le flux de menu au-dessus du contenu 100%. Vous devrez ensuite positionner le contenu à l'intérieur du div d'une manière qui tient compte du menu.

La deuxième solution consiste à définir le menu supérieur sur position:absolute, ce qui devrait également le sortir du flux, mais rester en place lorsque vous faites défiler.

Une troisième solution est quelque chose comme ceci, qui devrait fonctionner mais que je n'ai pas testé pour moi-même.

#topmenu 
{ 
    height: 53px; 
} 
div 
{ 
    height: 100%; 
    margin-bottom: -53px; 
} 

Answer 2

Je pense que ce que vous aimeriez faire est dans le sens de ce concept (corrigez-moi si je me trompe).

https://css-tricks.com/snippets/css/sticky-footer/

http://ryanfait.com/sticky-footer/

Hope this helps!