Mise en page CSS avec Pixel et Pourcentages

Question

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

Que dois-je faire le mal de mélange et Percents pixels? J'ai dû louper quelque chose. Comment puis-je résoudre ce problème si la section du contenu utilise le reste de l'espace de la page et je n'ai pas une 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 est de déplacer votre tête dans votre contenu ... alors il faudra de l'espace 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) positionner Absolument l'en-tête, avec z-index de dire 10. Donner le contenu div a-dessus de rembourrage de 65px, avec un z-index de 1. L'en-tête doit couvrir la zone rembourrée supérieure de la div de contenu. Cela fonctionne très bien avec des conceptions très rigides qui n'ont pas de largeurs dynamiques qui poussent / rétrécir la largeur de la fenêtre du navigateur.

2) la position Explicitement haut, à gauche, en bas, à droite de votre div de contenu. Ne pas spécifier de largeur ou de la hauteur. Dans ce cas, le haut, à gauche, en bas et à droite sont calculées sur la base de l'arête de rembourrage intérieur du bloc contenant de la div de contenu. Encore une fois, cela fonctionne très bien dans les conceptions rigides de site. Si le travail dans IE7 / 8, mais sera problématique avec IE6 et versions antérieures.

3) Utiliser une marge supérieure négative og -65px sur la div de contenu. Utiliser un rembourrage supérieure 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 hacks qui peut résoudre le problème, il suffit de chercher sur le net. Cela devrait fonctionner pour des dispositions rigides ou fluides.

Il y a beaucoup de ressources pour la conception CSS sur le net. Si les options ci-dessus ne fonctionnent pas, des recherches sur le net devraient apporter quelques ressources.

Answer 2

Essayez de lire cet article premier ... il est sur Conflit des positions absolues dans un modèle de CSS et d'une certaine manière, il aborde le genre de problème que 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. Le plus simple et le plus navigateur de manière compatible pour le faire serait de l'enfermer dans une table 2 de la ligne. Régler la hauteur de la table à 100%, la hauteur de première td à 65px, deuxième hauteur td non spécifié. Certaines personnes sont contre le recours à des tables pour la mise en page, mais si vous allez utiliser correctement de toute façon css alors pourquoi pas?

Bien, il serait préférable d'utiliser un design juste avec un div dessus de l'autre. Dynamiquement ajuster le contenu au navigateur ne fonctionne pas bien plus en raison de la grande varation des tailles d'écran.

Answer 4

(100% + N)> 100% - il n'y a pas une telle chose comme "le reste de l'espace" en CSS malheureusement.

Quand vous dites 100% cela signifie exactement que, de sorte que votre meilleur pari va être les options soit jrista 2 ou 3 (AMHA positionnement abs est à éviter). Je pense aussi que vous pouvez google la position:. Fixe