[ Navegadores participantes do teste : IE6/IE7/IE8/FF3/OP10/SF4/Chrome2]
[ Sistema operacional : Windows]
Vejamos o código primeiro:
Execute a caixa de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="autor" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Usando box-sizing para implementar quadro de imitação de div</title>
<style type="texto/css">
* { margem:0; preenchimento:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
html,corpo {altura:100%;}
.top {posição:relativo;margem superior:-100px;altura:100px fundo:#f60;}
.side {posição:relativa altura:100%;margem-direita:-3px;
.main {posição:relativo;overflow:auto;altura:100%;
.bottom {posição:relativo;altura:100px fundo:#f60;
</estilo>
</head>
<corpo>
<div class="top">
principal
</div>
<div class="lado">
lado
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="principal">
principal
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="inferior">
fundo
</div>
</body>
</html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
Partes principais :
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
O princípio é provavelmente este :
Mil palavras não valem uma imagem. Através da comparação antes e depois da cirurgia plástica, todos deveriam ser capazes de ver o efeito do tamanho da caixa: caixa de borda.
Os alunos que entendem de dimensionamento de caixas devem saber que ele vem do mundo CSS3 que está longe de Weiguo, então IE6/IE7 não é suportado, mas sou muito responsável e digo: esta demonstração normalmente é compatível com IE6/IE7.
Porque...
no IE6/IE7, o valor de tamanho de caixa padrão de <html> é border-box (Nota: o IE7 é um pouco anormal e a consciência se recuperou após overflow:hidden, o que não afetará a operação normal do esta demonstração). ,
A questão agora é usar este método. Vamos comparar as vantagens e desvantagens, e você pode decidir por si mesmo:
É melhor usar o método de posicionamento absoluto. Atualmente, esse método tem duas vantagens principais:
Sua maior desvantagem é que é inflexível. Se não existisse o IE6, acho que definitivamente escolheria o método de posicionamento absoluto.
A seguir está um exemplo de demonstração de aplicativo.
Execute a caixa de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="autor" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Usando box-sizing para implementar quadro de imitação de div</title>
<style type="texto/css">
* { margem:0; preenchimento:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;preenchimento:100px 0;
html,corpo {altura:100%;}
.top {posição:relativo;margem superior:-100px;altura:100px fundo:#f60;}
.side {posição:relativa altura:100%;margem-direita:-3px;
.main {posição:relativo;overflow:oculto altura:100%;_margem-esquerda:0; índice z:2;}
.main iframe { altura:100%; largura:100%;
.bottom {posição:relativo;altura:100px fundo:#f60;
</estilo>
</head>
<corpo>
<div class="top">
principal
</div>
<div class="lado">
lado
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="principal">
<iframe frameborder="0" src=" http://www.g.cn/"></iframe >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="inferior">
fundo
</div>
</body>
</html>
[Ctrl+A Todas as dicas de seleção: Você pode modificar parte do código primeiro e depois pressionar Executar]
Um problema que deve ser observado :
Não dê overflow:hidden ao corpo, ele ocultará implacavelmente qualquer coisa fora dele Coisas, incluindo topo/fundo (cabeçalho/rodapé);
um ponto importante que deve ser entendido :
O método de geração da altura de [100%+(N)px]: div { height:100%; )px;} .