Estou tentando definir algumas dimensões, de modo que a página ocupe a página inteira.
Coloquei uma figura aqui em anexo pra explicar, o HTML+CSS segue abaixo.
As áreas vermelhas tem tamanho fixo (largura e altura em px)
As áreas verdes, eu quero que adaptem suas dimensões de forma que toda a janela do browser, não importe o tamanho, fique preenchida.
A verde de cima tem largura 100% e altura que deve se ajustar.
A verde de baixo tem altura fixa e largura que deve se ajustar, sem sobrepor a vermelha à direita e sem deixar espaço em branco.
Tenderam?
Não to conseguindo fazer esse ajuste com o html e css que montei.
Alguém pode me dar uma luz?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.class-you {
color:#3895BF;
font-weight:bold;
}
.class-partner {
color:#2E900D;
font-weight:bold;
}
#container {
width: 100%;
height: 100%;
}
#content {
width: 100%;
height: 100%;
}
#topbar {
padding-top: 10px;
height: 50px;
width: 100%;
}
#buttons {
padding-bottom:5px;
width:170px;
float:left;
}
.buttonFont {
font-size:10px;
}
#info {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
float:left;
padding-top:5px;
}
.label {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#3895BF;
}
#externalPanel {
clear:both;
margin: 0 5px 0 5px;
height:70%;
width:99%;
}
#panel {
overflow:auto;
padding:3px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
height: 100%;
width: 100%;
}
#typing {
padding-top: 5px;
margin-left: 4px;
width: 95%;
height: 25px;
clear: both;
}
#sendMessage {
padding-top:5px;
margin-left:0px;
width: 100%;
height: 62px;
}
#message {
float: left;
width: 89%;
height: 60px;
}
#submit {
float: right;
font-size:13px;
width: 10%;
height: 62px;
}
#ads {
clear: both;
margin-top: 10px;
height: 90px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="topbar">
<div id="buttons" class="buttonFont">
<input type="button" id="logout" name="logout" value="close" />
<input type="button" id="status" name="status" value="searching..." />
</div>
<div id="info">
you are a ...
</div>
</div>
<div id="externalPanel" class="ui-corner-all ui-widget-content">
<div id="panel">
</div>
</div>
<div id="typing"></div>
<div id="sendMessage">
<div id="messageBox">
<textarea id="message" name="message" class="ui-corner-all ui-widget-content"></textarea>
</div>
<div id="submitBox">
<input type="button" id="submit" value="send" />
</div>
</div>
<div id="ads">
</div>
</div>
</div>
</body>
</html>
Valeu!!
Attached Files
-
lay.JPG 28.83KB
0 downloads
