Jump to content

Problema com CSS Layout


mitra-
 Share

Recommended Posts

Boa tarde,

Pretendo efectuar o seguinte:

http://img801.imageshack.us/img801/1647/layoutexemplo.jpg

É um layout simples, com um container estilo "folha" com comprimento por exemplo a 96% e centrado.

Até aqui tudo bem.

O meu problema está na altura. Defini por exemplo uma altura de 90% para o container, mas o conteúdo que é colocado na parte "branca" não está a "esticar" o container.

Se coloco conteúdo a mais, este passa por cima da margem final e continua na zona cinzenta.

A ideia é ter um layout tipo "height 100%" mas com uma pequena margem fixa em baixo.

Alguém me pode dar uma dicas?

Obrigado.

Link to comment
Share on other sites

Muito simples .

Para esticares uma div a 100% é necessário ela conter style - position: aboslute ; , e o html estar com style de - height: 100% ;

Por exemplo :

<style>
html { height: 100% ; }

#minhadiv { height: 90%; position: absolute; }
</style>


<div id="minhadiv"></div>

Para mais dúvidas add joao.lucas.89@hotmail.com

Entrem no meu websiteQuem sabe os meus conhecimentos podem te ajudarhttp://luquinhas.com/

Link to comment
Share on other sites

Afinal não consegui completamente.

O meu div de content não está a 100%, e o container que está por baixo acaba por ficar visível.

Aqui fica a minha página de testes:

<!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" xml:lang="en"> 
<head> 
<style>
	html,body {
		margin:0;
		padding:0;
		height:100%; /* needed for container min-height */
		background-color: #CCCCCC;

		font-family:arial,sans-serif;
		font-size:small;
		color:#000;
	}

	div#container {
		position:relative; /* needed for footer positioning*/
		margin:0 auto; /* center, not in IE5 */
		width: 96%;
		background:#FF0000;

		height:auto !important; /* real browsers */
		height:100%; /* IE6: treaded as min-height*/
		min-height:100%; /* real browsers */
	}

	div#header 
	{
		height: 60px;
		background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
		border-left: 1px solid #000;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
	}

	div#content {
		width: 100%;		

		height:auto !important; /* real browsers */
		height:100%; /* IE6: treaded as min-height*/
		min-height:100%; /* real browsers */

		border-left: 1px solid #000;
		border-right: 1px solid #000;
		background-color: lime;


		/*padding:1em 1em 6em;*/ /* bottom padding for footer */
	}

	div#footer {
		position:absolute;
		width:100%;
		height: 40px;
		bottom:0; /* stick to bottom */
		background: blue;

		border-top: 1px solid #000;
	}
</style>
</head> 

<body> 

<div id="container"> 
	<div id="header"> 
		MY HEADER
	</div> 

	<div id="content"> 
			CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
			CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
			CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
			CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
			CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
	</div> 

	<div id="footer"> 
		MY FOOTER
	</div> 
</div> 

</body>
</html>

Coloquei uma cor diferente em cada div para se perceber bem os limites de cada um. Basicamente o que pretendo é que não se veja a secção a vermelho, que é apenas um container. Quero que o div "content" tenha height 100%. Idealmente só devia ver verde e não vermelho.

Alguém pode dar um dica?

Já andei aqui a martelar mas não estou a conseguir  :down:

Link to comment
Share on other sites

agora (são 3:39am) não te posso ser muito específico. mas usei esse mesmo código para um footer que se "cola" á div de conteúdos. tive alguns problemas, mas porque quero que o footer fique com uma background-image, que esta apareça centrada(o texto) em relação ao monitor ou janela do browser, mas que tem mais width do que a div wrapper (a imagem é bem larguinha), e pronto, tive de andar a definir posicionamentos negativos, etc. mas de resto, funcionou bem.

PS : testei agora no FF3.6, e no modo normal aparece uma linha ao longo do container, +/- 2px pa cima das margens cinza. tenho uma extensao chamada developer tools, e com o chamado Border Box, aparece direito .  ?

não percebo, aquilo que diz no site com o css, é o que o css faz, se precisar mais do que o teu monitor pode mostrar pimbas, o content estica, se não fica como está, "100%";

Link to comment
Share on other sites

Bem, não sei porquê fazer uma tempestade num copo de água por causa disto...

Podias simplesmente deixar a div #conteudo levar os conteudos, o background ficava dado no #container...

De qualquer forma, isto assim funciona.

Mas vai dar quase à mesma coisa e sinceramente fica bem mais feio...

Código html:

<!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" xml:lang="en">
<head>
  <style>
    ... Vou meter à parte ...
  </style>
</head>

<body>          
  <div id="container">                
    <div id="header">
      MY HEADER                 
    </div>                
    <div id="conteudo">                  
      <div id="conteudoReal">
        CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
        CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
        CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
        CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />
        CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />CONTENT LINE<br />                  
      </div>                                   
      <div id="footer">
        MY FOOTER                 
      </div>                  
    </div>                         
  </div>  
</body>
</html>

Código css:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
/* needed for container min-height */
    background-color: #CCCCCC;
    font-family: arial, sans-serif;
    font-size: small;
    color: #000;
}
div#container {
    position: relative;
/* needed for footer positioning*/
    margin: 0 auto;
/* center, not in IE5 */
    width: 96%;
    background: #ff0000;
    height: auto !important;
/* real browsers */
    height: 100%;
/* IE6: treaded as min-height*/
    min-height: 100%;
/* real browsers */
}
div#header {
    position: relative;
    height: 60px;
    background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    z-index: 2;
}
div#conteudo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto !important;
/* real browsers */
    height: 100%;
/* IE6: treaded as min-height*/
    min-height: 100%;
/* real browsers */
    background: green;
    z-index: 1;
}
div#conteudoReal {
    position: relative;
    margin: 60px 0 0;
    padding-bottom: 40px;
}
div#footer {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 0;
/* stick to bottom */
    background: blue;
    border-top: 1px solid #000;
    z-index: 2;
}

Melhores cumprimentos,João Lopes***Esta mensagem foi escrita ao abrigo do novo Acordo Ortográfico***

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.