• 0
Sign in to follow this  
Henderson

Não consigo definir dimensões como quero

Question

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?

layk.th.jpg

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

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this