Fixed Headr & Sidebar

[SnakeX 1]

Boas,

 

Eu estou a tentar criar um layout que ocupe o ecrã todo, ou seja 100% height para um sistema de admin, eu já tenho o layout +/- criado, mas queria fazer uma pequena alteração que não estou a conseguir...

 

Portanto eu tenho este HTML e CSS:

 

HTML

<div id="header"> header </div>
<div id="left-sidebar">
   <div class="bar">menu left</div>
   content left
</div>
<div id="top-bar">top menu right</div>
<div id="content"> content </div>

 

 

CSS:

body { margin: 0; padding: 88px 0 0 300px; }

#header { font: 12px Arial; position: fixed; top: 0; left: 0; width: 500%; height: 88px; background: #f1f1f1; }

#left-sidebar { font: 12px Arial;  position: fixed; top: 88px; left: 0; width: 300px; float: left; background: #969696; height: 100%; }
	#left-sidebar .bar { height: 38px; background: #424242; }

#top-bar {  font: 12px Arial; position: fixed; top: 88px; left: 300px; width: 100%; background: #424242; height: 38px; }

* html body{
 overflow:hidden;
} 
* html div#content{
 height:100%;
 overflow:auto; background: #fff;
}

#content { font: 12px Arial;  background: #fff; }

 

 

 

Então o que eu quero fazer é, em vez de a barra de scroll do browser ficar na página inteira, eu queria que ficasse somento na div do #content

 

Provavelmente é uma coisa bem simples, mas não estou a conseguir fazer lol

[Diéssica 140]

Limita a parte do conteúdo então, determinando uma altura fixa. Quando passar daquela altura fixa, a barra de rolagem aparece.

[SnakeX 1]

Mas se limitar uma altura fixa nao faz o que pretendo que e ter um layout que ocupe 100% do ecra do utilizador ou seja 100% height e 100% width

 

Parece que vou ter de utilizador javascript aumentar e diminuir a caixa central sem que a scrollbar do browser apareca daquela forma

[Diéssica 140]

Pode explicar melhor?

 

Tu quer que o elemento do conteúdo ocupe 100% na altura da tela, e quando o conteúdo ocupar todo esse limite, mostrar a barra de rolagem pra ele?

 

A barra de rolagem seria então conforme a resolução do usuário....?

[SnakeX 1]

<style type="text/css">
       <!--
       html { overflow: hidden; overflow-x: hidden; }

       body {
         margin: 0;
         padding: 0;
         height: 100%;
       }

       #header, #footer, #controlpanel, #mapcontainer, #container
       {
           position: absolute;
           width: 100%;
           left: 0;
           background: #BDBDBD;
       }       

       #header 
       {     
           top: 0;
           height: 50px;
           text-align: center;
       }

       #footer
       {
           position: relative;
           bottom: 0px;
           height: 50px;
           text-align: center;
       }

       #container 
       {
           position: relative;
           top: 50px;        
           height: 95%;
       }

       #controlpanel 
       {              
           width: 20%;
           height: 100%;
           text-align: center;
           background: #E6E6E6;
       }

       #mapcontainer 
       {             
           left: 20%;
           background: #F00;
           width: 80% !important;
           height: 90%; overflow: scroll; overflow-x: hidden; 
       }

       -->
   </style>


<div id="header"></div>

 <div id="container">
       <div id="controlpanel"></div>
       <div id="mapcontainer">

<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

       </div>  </div>

 

 

Ja quase que consegui, so falta conseguir com que o #mapcontainer fique com o height a 100%, eu posso colocar a 100% mas ele esconde um pouco a scrollbar, alguma maneira de resolver com css ?