Não consigo definir dimensões como quero

Henderson · Agosto 15, 2011

Olá.

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!!

Entrar

Não consigo definir dimensões como quero

Pergunta

Henderson

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades