Diseño CSS con Pixel y porcentaje

Question

Tengo un div que contiene dos divs anidados, uno que especifica una altura de 65 pixeles (cabecera), el otro que especifica la altura como 100% (contenido) y se supone que debe tomar el resto del espacio veritically. Cuando la página se representa, hay una barra de desplazamiento a la derecha debido a la altura especificada de 65 píxeles de la cabecera.

¿Qué estoy haciendo porcentajes de mezcla erróneos y los píxeles? Debo estar perdiendo algo. ¿Cómo puedo solucionar este problema por lo que la sección de contenido usa el resto del espacio de la página y no tienen una barra de desplazamiento?

Aquí está el marcado ASP .NET y CSS que estoy utilizando:

<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 solución más sencilla es mover el encabezado en tu sitio ... entonces se ocupan espacio dentro del bloque de contenidos, en lugar de por encima de ella.

Si eso no es una opción, hay una gran variedad de soluciones que podrían resolver el problema. Aquí está una lista de algunos de ellos:

1) colocar de manera absoluta la cabecera, con z-index de, digamos, 10. Dar la div de contenido: acolchado superior de 65px, con un índice z de 1. La cabecera debe cubrir la zona acolchada superior del div de contenido. Esto funciona muy bien con diseños muy rígidas que no tienen ningún anchos dinámicos que crecen / encoger con el ancho de la ventana del navegador.

2) posicionar de forma explícita la parte superior, izquierda, abajo, derecha de la div de contenido. Especificar no anchura o altura. En este caso, la parte superior, izquierda, inferior y derecha se calculan basándose en el borde acolchado interior del bloque de contención de la div contenido. Una vez más, esto funciona muy bien en los diseños de sitios rígidos. En caso de trabajar en IE7 / 8, pero va a ser problemático con IE6 y versiones anteriores.

3) Utilice una tapa -65px margen og negativo en el div contenido. Use un relleno superior de 65px para compensar. Esto puede ser problemático con IE7 y versiones anteriores, ya veces FireFox obtiene poco firme con márgenes negativos. Hay cortes que pueden resolver el problema, simplemente buscar en la red. Esto debería funcionar para los diseños rígidos o fluidos.

Hay una gran cantidad de recursos para el diseño CSS en la red. Si las opciones anteriores no funcionan, algunas búsquedas en la red deben traer algunos recursos.

Answer 2

Trate de leer este artículo primera ... se trata de en conflicto posiciones absolutas en una plantilla CSS y de alguna manera se refiere a la clase de problema que está hablando.

Answer 3

En el momento en que tiene 2 divs con una altura total de 100% + 65px por lo que debe tener una barra de desplazamiento

Realmente no se puede hacer lo que usted está tratando con un solo divs sin recurrir a hacks CSS. La forma más simple y más compatible con el navegador de hacerlo sería a encerrarlo en una tabla de 2 filas. Ajuste la altura de la mesa al 100%, primera altura a 65px td, segunda altura td no especificado. Algunas personas están en contra de recurrir a las tablas de diseño, pero si se va a utilizar CSS incorrectamente todos modos ¿por qué no?

Si bien, sería mejor utilizar un diseño sólo con una div encima del otro. Dinámicamente ajustar el contenido al navegador no funciona bien ya debido a la amplia varation de tamaños de pantalla.

Answer 4

(100% + N)> 100% - no hay tal cosa como "el resto del espacio" en el CSS por desgracia.

Cuando usted dice 100% que significa exactamente eso, así que lo mejor va a ser de opciones ya sea jrista 2 o 3 (en mi humilde opinión posicionamiento abs debe ser evitado). También creo que es posible que desee a la posición de Google:. fijo