CSS layout com Pixel e porcentagens

Question

Eu tenho uma div que contém duas divs aninhadas, uma que especifica uma altura de 65 pixels (cabeçalho), o outro que especifica a altura como 100% (conteúdo) e supõe-se para tomar o resto do espaço veritically. Quando a página é processada, há uma barra de rolagem do lado direito por causa da altura especificada de 65 pixels do cabeçalho.

O que estou fazendo de errado misturar percentuais e pixels? Eu devo estar esquecendo alguma coisa. Como faço para corrigir isso para a seção de conteúdo utiliza o resto do espaço da página e eu não tenho uma barra de rolagem?

Aqui está a marcação ASP .NET e CSS que estou 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

A solução mais simples é mover seu cabeçalho em seu conteúdo ... então ele vai ocupar espaço dentro do bloco de conteúdo, em vez de acima dela.

Se isso não é uma opção, há uma variedade de soluções que poderiam resolver o problema. Aqui está uma lista de alguns:

1) Absolutamente posicionar o cabeçalho, com z-index de dizer 10. Dê o conteúdo Div um padding-top de 65px, com um z-index de 1. O cabeçalho deve cobrir a área acolchoada superior da div conteúdo. Este será um grande trabalho com projetos muito rígidas que não têm quaisquer larguras dinâmicas que crescem / encolher com a largura da janela do navegador.

2) posicionar explicitamente o topo, esquerda, baixo, direita da sua div conteúdo. Especificar nenhuma largura ou altura. Neste caso, a parte superior, esquerda, inferior e direita são calculados com base na borda preenchimento interior do bloco contendo da div conteúdo. Novamente, isso funciona muito bem em projetos rígidas do site. Devem trabalhar no IE7 / 8, mas vai ser problemático com o IE6 e anteriores.

3) Use uma margem superior negativo og -65px sobre a div conteúdo. Use um preenchimento superior de 65px para compensar. Isto pode ser problemático com o IE7 e anteriores, e às vezes FireFox fica instável com margens negativas. Existem hacks que podem resolver o problema, basta pesquisar na net. Isso deve funcionar para layouts rígidos ou fluidos.

Há uma grande quantidade de recursos para o projeto CSS na rede. Se as opções acima não funcionarem, algumas pesquisas na net deve trazer alguns recursos.

Answer 2

Tente ler este artigo primeiro ... é sobre posições conflitantes absolutos em um modelo de CSS e de alguma forma ele aborda o tipo de problema que você está falando.

Answer 3

No momento você tem 2 divs com uma altura total de 100% + 65px por isso deve ter uma barra de rolagem

Você não pode realmente fazer o que você está tentando com apenas divs sem recorrer a hacks CSS. A maneira mais simples e navegador compatível para fazê-lo seria a de colocá-lo em uma mesa de 2 linha. Definir a altura da tabela de 100%, primeira altura td para 65px, segunda altura td não especificado. Algumas pessoas são contra a recorrer a tabelas para layout, mas se você estiver indo para usar css incorretamente qualquer maneira, então por que não?

Embora, seria melhor usar um projeto apenas com um div acima do outro. Dinamicamente ajustar o conteúdo para o navegador não funciona mais bem devido à grande varation de tamanhos de tela.

Answer 4

(100% + N)> 100% - não há tal coisa como "o resto do espaço" no CSS infelizmente.

Quando você diz 100% isso significa exatamente isso, então sua melhor aposta vai ser opções tanto de jrista 2 ou 3 (posicionamento imho abs deve ser evitado). Eu também acho que você pode querer google posição:. Fixa