Duvida css/xhtml

joarley · Fevereiro 11, 2011

olá pessoal!

To tentando fazer uma pagina aqui mas não consigo fazer a div#content ocupar o restante da tela entre a div#header e a div#footer lembrando que a div#header pode ter tamanhos variaveis dependendo do tanto de itens que tem na lista a mesca coisa com a tag "footer".

Dentro da tag div#parcelas vai ter um grid mas esse grid ocupa todo espaço disponivel na div#parcelas mas essa div mesmo colocando a altura dele pra 100% não esta dando certo.

alguém consegue me mostrar o caminho das pedras pra deixar essas divs ocupando todo espaço pra elas disponivel?

se precisar de mais detalhes ou print de como é pra ficar o layout favor me pedi

segue abaixo meu codigo...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title></title>
      <style type="text/css" media="screen">
         html {
            height: 100%;
         }
         body {
            font-size: 65%;
            margin: 0;   
            font-family:verdana;
            height: 100%;
         }
         #wrapper {
            width: 100%;
            height: 100%;
            min-width: 100%; 
            min-height: 100%;     
         }
         #title {
            width: 100%;
            height: 25px;
            line-height:25px;
            background-color: #99CCFF;
            text-align:center;
            border-bottom: 1px solid #0064A6;
         }
         #header #title span {
            font-size: 120%;
            font-weight:bold;
            color:#fff;
         }
         .tekDefaultGrid
         {
            font-size: 110%;
         }
         #header #dadosProposta ul {
            font-size: 110%;
            list-style-type: none;
            text-align: left;
            margin: 0px;
            padding: 0px;
         }
         #header #dadosProposta ul li {
            margin: 10px;
            border: 1px solid #0064A6;
            border-left: 6px solid #99CCFF;
            font-weight: lighter;
            padding: 1px 5px 1px 8px;
            page-break-before: left;
            page-break-after: left;
         }
         #content #headerParcelamento ul {
            list-style-type: none;
            text-align: left;
            margin: 0px;
            padding: 0px;
            margin-bottom: 10px; 
         }
         #content {
            
         }
         #content #headerParcelamento ul li {
            display:inline;
            margin-bottom: 4px;
            font-weight: lighter;
            padding: 0;
            page-break-before: left;
            page-break-after: left;
            font-size: 110%;
            font-weight:bold;
            color:#0064A6;
         }
         .subTitle {
            font-weight:bold;
         }
         .dadosDestaque {
            font-size: 110%;
            font-weight:bold;
            color:#0064A6;
         }
         #titleParcelamento {
            margin-top: 15px;
            line-height: 20px;
            padding-left:10px;
            height: 20px;
            background-color: #99CCFF;
            border: 1px solid #0064A6;
            border-bottom: none;
            color:#fff;
         }
         #parcelamento {
            margin: 10px;
            min-width: 680px;
         }
         #parcelamento .subTitle {
            font-weight:bold;
            font-size: 110%;
         }
         input{
            font-size: 80%;
            border: 1px solid #0064A6;
            padding-top: 2px;
            text-indent: 8px;
            color: #0064A6; 
            font-weight:bold;
            font-size: 120%;
         }
         #txtQtdParcelas {
            width: 38px;
            margin-right: 40px;
         }
         #txtDtPriFaturamento { 
            width: 84px;
            margin-right: 20px; 
         }
         #parcelamento #parcelas{
             width:100%;
             margin-top: 25px;        
         }
         #btnCalcular {
            width:100px;
            margin: 0 0 0 10px;
            float: right;
         }
         #footer{
            margin: 15px 10px 0px 10px;
            min-width: 680px;
         }
         #footer button{
            margin: 0 0 10px 10px;
            float: right;
         }
      </style>
   </head>
   <body>
      <div id="wrapper">
         <div id="header">
            <div id="title"><span>Teste Pagina css/xhtml</span></div>
            <div id="dadosProposta">
               <ul>
                  <li>
                     <span class="subTitle">Cliente: </span>
                     <span class="dadosDestaque">Script Brasil SA</span>
                  </li>
                  <li>
                     <span class="subTitle">Proposta: </span>
                     <span>000124246524</span>
                  </li>
                  <li>
                     <span class="subTitle">Referêcia: </span>
                     <span>contato dia 25/10/2012</span>
                  </li>
               </ul>
            </div>
         </div>
         <div id="content">
            <div id="titleParcelamento" class="dadosDestaque"><span>Parcelamento</span></div>   
            <div id="parcelamento">
               <div id="headerParcelamento">
                  <button id="btnCalcular">Calcular</button>
                  <ul>
                     <li><span><label>Data do 1º Faturamento:</label> <input id="txtDtPriFaturamento" name="txtDtPriFaturamento" type="text" /></span></li>
                     <li><span><label>Quantidade de parcelas:</label> <input id="txtQtdParcelas" name="txtQtdParcelas" type="text" /></span></li>
                  </ul>
               </div>
               <div id="parcelas" class="tekDefaultGrid"> </div>
            </div>
         </div>
         <div id="footer">
            <button id="btnCancelar">Cancelar</button>
            <button id="btnOk">Ok</button>
         </div>
      </div>
   </body>
</html>

_Vinny_ · Fevereiro 12, 2011

Eu definitivamente não entendia a sua dúvida. Posta o print de como é a sua visualização.

joarley · Fevereiro 14, 2011

Cara ta ai o print meu problema é que essa janela pode ser redmensionada ai quando isso acontece na horizontal eu consigo fazer as divs ficar ocupando toda tela mas na vertical já não é tão facil já que quero essa div onde fica o grid das parcelas ocupar o restante da tela brigado de qualquer forma a atenção

segue um print da tela...

Entrar

Duvida css/xhtml

Pergunta

joarley

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

_Vinny_

Link para o comentário

Compartilhar em outros sites

joarley

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades