Como posso criar um layout de borda usando css?

9

Eu quero criar um layout de borda para uma webapp, onde há um cabeçalho e rodapé de tamanho fixo, uma barra lateral e um conteúdo do centro principal que se expande para preencher o espaço restante. Pense nisso como seu navegador, onde as barras de ferramentas e a barra de status têm um tamanho fixo, a barra lateral pode mudar de tamanho, mas o site no centro se expande para preencher o tamanho restante.

edit: Para esclarecer, desejo especificar a altura de todo o design em pixels, por exemplo, 600px. Então, quero que a barra lateral e as divs centrais se expandam para preencher o espaço disponível, mesmo que o conteúdo não seja grande o suficiente para preencher o espaço. A analogia do webbrowser pode ser usada aqui também. Mesmo que a página que você está vendo no navegador não seja mais alta que a janela do navegador, o navegador não é redimensionado.

Existe alguma maneira de fazer isso em css?

    
por Marius 28.02.2009 в 13:37
fonte

4 respostas

3
div { border : 1px solid #d3d3e3 }

#north    { margin:0;  padding:1em;  }        
#south    { margin:0;  padding:1em;  }        
#east     { margin:0;  padding:1em;  width:6em; height:22em; float:left; margin-right:1.1em }        
#west     { margin:0;  padding:1em;  width:6em; height:22em; float:right; margin-left:1.1em }        
#center   { margin:0;  padding:1em;  padding-bottom:0em; }        
#center:after    { content:' '; clear:both; display:block; height:0; overflow:hidden }

<div id="north">North</div >
<div id="east">East</div>
<div id="west">West</div>
<div id="center">Center</div>
<div id="south">South</div>

Link ao vivo: link

    
por WolfgangCodes 20.06.2012 / 20:55
fonte
1

O layout da tabela CSS pode lidar com isso bem.

.borderLayout {
  display: table;  
  width: 100%
}

.borderLayout .top {
    display: table-row;
}

.borderLayout .left {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .center {
    display: table-cell;
    vertical-align: middle;
}

.borderLayout .right {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .bottom {
    display: table-row; 
}

JSFiddle

    
por Iucounu 03.08.2017 / 17:10
fonte
0

O método ao qual você se refere parece um trabalho para o rodapé - isso já é antigo, mas ainda tem um charme ... o homem de azul - footerStickAlt

Pergunta semelhante aqui.

E tenho certeza de que, se você usar os mesmos critérios nessa pergunta e a pergunta vinculada para executar uma pesquisa, surgirá mais.

    
por Jayx 28.02.2009 / 15:49
fonte
0

experimente o flexbox, funciona com o firefox e o webkit

link

a implementação atual não é atualizada, mas é boa o suficiente

mas você provavelmente pode fazer isso com tabelas (que são semelhantes ao flexbox)

espero que isso ajude

    
por user652649 22.02.2012 / 02:50
fonte