desenhar a disposição flexível das páginas
Primeiro veja a imagem preparada com tinta.
Eu quero projetar uma página flexível que terá este tipo de quatro divisões. e, portanto, mudar automaticamente o tamanho da janela do monitor ou do navegador. Esta caixa todas as 4 devem caber tela de navegador 100% e qualquer tamanho de monitor e evitar barra de posicionamento para aparecer sempre. qualquer um pode dizer-me como codificá-lo na folha de estilo css.
Aqui está o meu código. galeria:<div id="bottomleft">
</div>
<div id="topleft">
</div>
<div id="topright">
</div>
<div id="bottomright">
</div>
</div>
</body>
Css:
*
{
margin: 0;
padding: 0;
}
#wrapper
{
margin: 0px auto;
height: 100%;
width: 100%;
}
#bottomleft
{
position:relative;
height: 50%;
width: 50%;
border: 1px solid black;
float: left;
}
#topleft
{
position:relative;
height: 50%;
width: 50%;
border: 1px solid black;
float: right;
}
#topright
{
position:relative;
height: 50%;
width: 50%;
border: 1px solid black;
float: left;
}
#bottomright
{
position:relative;
height: 50%;
width: 50%;
border: 1px solid black;
float: right;
}
1
2 answers
Agora define o teu body, html height 100%;
em css como este
E define {[2] } no seu id
body, html{
height:100%;
}
#bottomleft, #bottomright, #topright, #topleft{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
2
Author: Rohit Azad, 2012-10-10 06:01:30
Você usa esta marca meta-in head para todos os dispositivos e usa outros css para qualquer largura da janela
Esta meta-utilização para qualquer etiqueta devic e de ligação para carregar css com o 'min-width شrbitrary'
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />
Melhores cumprimentos
0
Author: Saeed Py, 2012-10-10 06:10:56