Layout CSS con Pixel e percentuali

Question

Ho un div che contiene due div annidati, uno che specifica un'altezza di 65 pixel (intestazione), l'altra che specifica l'altezza come 100% (contenuto) e si suppone di prendere il resto dello spazio veritically. Quando la pagina viene visualizzata, v'è una barra di scorrimento sulla destra a causa dell'altezza specificato di 65 pixel dell'intestazione.

Che cosa sto facendo percentuali di miscelazione sbagliate e pixel? Devo mancare qualcosa. Come faccio a risolvere questo problema in modo che la sezione del contenuto usa il resto dello spazio della pagina e non ho una barra di scorrimento?

Ecco il markup ASP .NET e CSS sto usando:

<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 soluzione più semplice è quello di spostare l'intestazione sul suo sito web ... allora sarà occupano spazio all'interno del blocco di contenuti, piuttosto che sopra di esso.

Se questo non è un'opzione, ci sono una varietà di soluzioni che potrebbero risolvere il problema. Ecco un elenco di alcuni:

1) Assolutamente posizionare l'intestazione, con z-index dire 10. Assegnare contenuto div un'imbottitura-top di 65px, con z-index 1. L'intestazione dovrebbe coprire l'area imbottita superiore del div contenuti. Questo grande lavoro con disegni molto rigide che non hanno alcuna larghezze dinamiche che si sviluppano / shrink con la larghezza della finestra del browser.

2) posizionare in modo esplicito l'alto, a sinistra, in basso, a destra del div contenuti. Specificare no larghezza o l'altezza. In questo caso, la parte superiore, a sinistra, in basso, a destra e vengono calcolate in base al bordo imbottitura interna del blocco contenitore del div contenuti. Ancora una volta, questo funziona alla grande nei disegni del sito rigidi. Dovrebbe funzionare in IE7 / 8, ma sarà problematico con IE6 e precedenti.

3) Utilizzare un negativo superiore -65px margine og sul div contenuti. Utilizzare un padding superiore di 65px per compensare. Questo può essere problematico con IE7 e versioni precedenti, e, talvolta, FireFox ottiene traballante con margini negativi. Ci sono hack che possono risolvere il problema, basta cercare la rete. Questo dovrebbe funzionare per i layout rigidi o fluidi.

Ci sono un sacco di risorse per la progettazione CSS in rete. Se le opzioni di cui sopra non funzionano, alcune ricerche in rete dovrebbero portare un po 'di risorse.

Answer 2

questo articolo prima ... si tratta di contrastanti posizioni assolute in un modello CSS e in qualche modo affronta il tipo di problema che si sta parlando.

Answer 3

Al momento si hanno 2 div con un'altezza complessiva di 100% + 65px quindi dovrebbe avere una barra di scorrimento

Non si può davvero fare quello che stai cercando con un solo div senza ricorrere a hack CSS. Il modo più semplice e compatibile con browser per farlo sarebbe quello di racchiuderlo in una tabella 2 di fila. Impostare l'altezza del piano di 100%, prima altezza td a 65px, secondo td height non specificato. Alcune persone sono contro il ricorso a tabelle per il layout, ma se avete intenzione di usare i CSS in modo non corretto in ogni caso, allora perché no?

Anche se, sarebbe meglio usare un disegno con un solo div sopra l'altro. Dinamicamente regolando il contenuto al browser non funziona bene più a causa della vasta varation di dimensioni dello schermo.

Answer 4

(100% + N)> 100% - non c'è cosa come "il resto dello spazio" in CSS purtroppo.

Quando si dice 100% significa esattamente questo, quindi la cosa migliore è andare a essere opzioni sia di jrista 2 o 3 (imho posizionamento abs è da evitare). Penso anche che si potrebbe desiderare di google posizione:. Fissa