CSS-Layout mit Pixel und Percents

Question

Ich habe ein div, die zwei verschachtelte divs enthält, eine, die eine Höhe von 65 Pixel (Header) spezifiziert, die andere, die die Höhe, als 100% (Gehalt) und es wird spezifiziert, um den Rest des Raumes veritically nehmen soll. Wenn die Seite macht, gibt es eine Scrollbar auf der rechten Seite wegen der Höhe von 65 Pixeln des Header angegeben.

Was bin ich falsch Misch Prozent- und Pixel zu tun? Ich muss etwas fehlt. Wie kann ich dieses Problem beheben, so der Inhalt Abschnitt den Rest des Seitenraumes verwendet und ich habe nicht eine Bildlaufleiste?

Hier ist der ASP .NET-Markup und CSS Ich bin mit:

<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

Die einfachste Lösung ist die Kopfzeile in Ihren Inhalt zu bewegen ... dann wird es Raum innerhalb des Inhaltsblockes aufzunehmen, anstatt darüber.

Wenn das nicht möglich ist, gibt es eine Vielzahl von Lösungen, die das Problem lösen könnten. Hier ist eine Liste von ein paar:

1) Position absolut der Kopfzeile, mit z-Index von 10. sagen Gib den Inhalt div eine padding-Oberseite 65px, mit einem z-Index von 1. Der Kopf sollte die obere gepolsterte Fläche des Inhalts div abzudecken. Dies wird mit sehr starrem Design große Arbeit, die keine dynamischen Breiten nicht hat, die / schrumpft mit der Breite des Browserfensters wachsen.

2) positioniert Explizit den oben, links, unten, rechts Ihre Inhalte div. Angeben keine Breite oder Höhe. In diesem Fall wird die oben, links, unten und rechts auf der inneren Polsterung Rand des umschließenden Blocks des Inhalts div berechnet. Auch hier funktioniert das große in starren Website-Design. Sollte in IE7 arbeiten / 8, aber mit IE6 und früher problematisch sein.

3) Verwenden Sie einen negativen oberen Rand og -65px auf den Inhalt div. Verwenden, um eine obere Polsterung von 65px zu kompensieren. Dies kann mit IE7 problematisch sein und früher, und manchmal wird FireFox wackelig mit negativen Margen. Es gibt Hacks, die das Problem lösen kann, nur die Suche im Netz. Dies sollte für starres oder Fluid-Layout arbeiten.

Es gibt eine Menge von Ressourcen für die CSS-Design auf dem Netz. Wenn die oben genannten Optionen nicht funktionieren, sollten einige Recherchen im Netz einige Ressourcen bringen.

Answer 2

Versuchen Sie lesen diesem Artikel erste ... es geht Absolute Position Widersprüchliche in einer CSS-Template und irgendwie ist es befasst sich die Art von Problem über Sie sprechen.

Answer 3

Im Moment haben Sie 2 divs mit einer Gesamthöhe von 100% + 65px so sollte es eine Scrollbar hat

Sie können nicht wirklich tun, was Sie mit versuchen divs nur ohne CSS-Hacks greifen zu müssen. Der einfachste und Browser kompatibel Weg, es zu tun, wäre es in einer Tabelle 2 Zeile zu umschließen. Stellen Sie die Tischhöhe auf 100%, erste td Höhe 65px, td zweite Höhe nicht angegeben. Manche Menschen sind gegen zu Tabellen für das Layout zurückgreifen, aber wenn Sie vorhaben, CSS nicht ordnungsgemäß verwenden sowieso, warum dann nicht?

Obwohl, wäre es besser, ein Design zu verwenden, nur mit einem div über dem anderen. Die dynamische Anpassung Inhalt an den Browser nicht mehr gut auf den breiten varation Bildschirmgrößen aufgrund nicht funktioniert.

Answer 4

(100% + N)> 100% - es gibt nicht so etwas wie "den Rest des Raumes" in leider CSS.

Wenn Sie 100% sagen, bedeutet es genau das, so die beste Wahl wird entweder jrista die Optionen 2 oder 3 sein (imho abs Positionierung vermieden werden). Ich denke auch, möchten Sie vielleicht Position Google. Fest