Mise en page CSS avec des pixels et des pourcentages

Question

J'ai un div qui contient deux divs imbriqués, l'un qui spécifie une hauteur de 65 pixels (en-tête), l'autre qui spécifie la hauteur de 100% (contenu) et il est censé prendre la reste de l'espace veritically. Lorsque la page s'affiche, il y a une barre de défilement sur la droite en raison de la hauteur spécifiée de 65 pixels de l'en-tête.

Qu'est-ce que je fais de mal mélanger des pourcentages et des pixels? J'ai dû louper quelque chose. Comment puis-je résoudre ce problème afin que la section de contenu utilise le reste de l'espace de la page et que je n'ai pas de barre de défilement?

Voici les balises ASP .NET et CSS J'utilise:

<div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"/> 
    <div id="header"> 
     <div style="float: left; height: 100%"><img align="top" alt="" src="~/images/Logo.gif" runat="server"/></div> 
     <div style="float: right; height: 100%"> 
      <div id="outer" > 
       <div id="middle"> 
        <div id="inner"> 
         <asp:Label runat="server" ID="ApplicationName" Text="Application" CssClass="appname"></asp:Label> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div id="content"> 
     <ig:WebSplitter ID="WebSplitter1" runat="server" Height="100%" Width="100%" 
      DynamicResize="True" CssClass="junk"> 
      <panes> 
       <ig:SplitterPane ToolTip="Navigation Pane" runat="server" Size="20%" CollapsedDirection="PreviousPane" Locked="true"> 
        <Template> 
         <asp:ContentPlaceHolder ID="NavigationPlaceHolder" runat="server"> 
          <ig:WebDataTree ID="NavTree" runat="server" EnableHotTracking="true" 
           Height="100%" OnNodeClick="NavTree_NodeClick" SelectionType="Single" 
           InitialExpandDepth="1" 
           Width="100%" BorderWidth = "0px" 
           EnableAjax ="true"> 
           <AutoPostBackFlags NodeClick="On" NodeCollapsed="Off" NodeExpanded="Off" NodeEditingTextChanged="Off" /> 
          </ig:WebDataTree> 
         </asp:ContentPlaceHolder> 
        </Template> 
       </ig:SplitterPane> 
       <ig:SplitterPane Tooltip="Content Pane" runat="server" Size="80%"> 
        <Template> 
         <asp:ContentPlaceHolder ID="SiteContentPlaceHolder" runat="server"/> 
        </Template> 
       </ig:SplitterPane> 
      </panes> 
     </ig:WebSplitter> 
    </div> 
</div> 

 
html 
{ 
    padding: 0px; 
    margin: 0px; 
    border: none; 
    width: 100%; 
    height: 100%; 
    font-family: verdana; 
    font-size: x-small; 
    font-weight: normal; 
    font-style: normal; 
    font-variant: normal; 
    text-transform: none; 
    text-transform: none;  
    float: none;  
} 

body 
{ 
    border: none; 
    padding: 0px; 
    height: 100%; 
    width: 100%; 
    border: none; 
    margin: 0px; 
} 

form 
{ 
    border: none; 
    margin: 0px; 
    padding: 0px; 
    border: none; 
    height: 100%; 
    width: 100%; 
} 

span.appname 
{ 
    text-align: right; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 18pt; 
    font-weight: bold; 
    font-style: normal; 
    color: #FFFFFF; 
    padding-right: 10px; 
} 

#header 
{ 
    background: #295984; 
    width: 100%; 
    height: 65px; 
    overflow: hidden; 
} 

#content 
{ 
    display: inline; 
    width: 100%; 
    height: 100%; 
} 

#outer {height: 100%; overflow: hidden; position: relative; width: 100%;} 
#outer[id] {display: table; position: static;} 

#middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/ 
#middle[id] {display: table-cell; vertical-align: middle; position: static;} 

#inner {position: relative; top: -50%; text-align: right;} /* for explorer only */ 
#inner {width: 100%; margin-left: auto; margin-right: auto;} /* for all browsers*/ 
#inner[id] {position: static;} 

Answer 1

La solution la plus simple consiste à déplacer votre en-tête dans votre contenu ... alors il prendra de la place dans le bloc de contenu, plutôt qu'au-dessus.

Si ce n'est pas une option, il existe une variété de solutions qui pourraient résoudre le problème. Voici une liste de quelques-uns:

1) Placez absolument l'en-tête, avec z-index de dis 10. Donnez au contenu div un padding-top de 65px, avec un z-index de 1. L'en-tête devrait couvrir la zone supérieure matelassée du contenu div. Cela fonctionnera très bien avec des conceptions très rigides qui n'ont pas de largeurs dynamiques qui croissent/rétrécissent avec la largeur de la fenêtre du navigateur.

2) Positionnez explicitement le haut, le gauche, le bas et le droite de votre contenu div. N'indiquez aucune largeur ou hauteur. Dans ce cas, les parties supérieure, gauche, inférieure et droite sont calculées en fonction du bord de remplissage interne du bloc conteneur de la div de contenu. Encore une fois, cela fonctionne très bien dans les conceptions de sites rigides. Devrait travailler dans IE7/8, mais sera problématique avec IE6 et plus tôt.

3) Utilisez une marge supérieure négative og -65px sur le contenu div. Utilisez un rembourrage supérieur de 65px pour compenser. Cela peut être problématique avec IE7 et plus tôt, et parfois FireFox devient bancale avec des marges négatives. Il y a des hacks qui peuvent résoudre le problème, il suffit de chercher sur le net. Cela devrait fonctionner pour les dispositions rigides ou fluides.

Il ya beaucoup de ressources pour la conception de CSS sur le net. Si les options ci-dessus ne fonctionnent pas, certaines recherches sur le net devraient faire apparaître certaines ressources.

Answer 2

Essayez de lire this article d'abord ... il est sur le point conflictuel absolu Positions dans un modèle de CSS et d'une certaine manière, il s'adresse le genre de problème dont vous parlez.

Answer 3

Au moment où vous avez 2 divs avec une hauteur totale de 100% + 65px il doit donc avoir une barre de défilement

Vous ne pouvez pas vraiment faire ce que vous essayez avec juste sans avoir recours à des div hacks css. La manière la plus simple et la plus compatible avec le navigateur de le faire serait de l'inclure dans une table à deux lignes. Réglez la hauteur de la table à 100%, la première hauteur td à 65px, la seconde hauteur td non spécifiée. Certaines personnes sont contre le recours à des tableaux pour la mise en page mais si vous allez utiliser incorrectement css de toute façon alors pourquoi pas?

Bien que, il serait préférable d'utiliser un design juste avec un div au-dessus de l'autre. L'ajustement dynamique du contenu au navigateur ne fonctionne plus correctement en raison de la grande variation des tailles d'écran.

Answer 4

(100% + N)> 100% - il n'y a malheureusement pas de "reste de l'espace" en CSS.Quand vous dites 100% cela signifie exactement cela, donc votre meilleur pari sera soit les options 2 ou 3 de jrista (le positionnement imho abs doit être évité). Je pense aussi que vous pourriez vouloir google position: fixe.