Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

doulo4ever

Tabela com 100% na vertical

Por , em Desenvolvimento frontend

Recommended Posts

doulo4ever    0

doulo4ever
Postado

Olá pessoal,

 

Tenho uma tabela que fica no centro da página e queria que ela tomasse toda a extensão da página na vertical mesmo que os textos não cheguem até o final da página.

 

Antes eu só colocava height="100%" e já era, mas depois que eu comecei a usar este padrão <html xmlns="http://www.w3.org/1999/xhtml"> e o height não resolve mais o problema, a tabela só desce até onde vai o texto, então tenho que ficar colocando <br> pra chegar o fundo até embaixo da página.

 

Tive que começar a usar este padrão porque o efeito lightview que usa biblioteca prototype não funciona sem ele! Antes eu só usava <html> e não tinha esse problema!

 

Como devo fazer?

 

Valeu!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcio Leandro    0

Marcio Leandro
Postado

Fórum errado.

Movido: PHP=>HTML

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Aqui é o fórum de Webstandards, Essa tabela é realmente necessária?

você está montando o teu layout com ela?, ou é apenas onde você trás os dados?

 

Te aconselho à estudar um poco de Tableless e CSS. Poste um link para teu site.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Olá pessoal,

 

Tenho uma tabela que fica no centro da página e queria que ela tomasse toda a extensão da página na vertical mesmo que os textos não cheguem até o final da página.

 

Antes eu só colocava height="100%" e já era, mas depois que eu comecei a usar este padrão <html xmlns="http://www.w3.org/1999/xhtml"> e o height não resolve mais o problema, a tabela só desce até onde vai o texto, então tenho que ficar colocando <br> pra chegar o fundo até embaixo da página.

 

Tive que começar a usar este padrão porque o efeito lightview que usa biblioteca prototype não funciona sem ele! Antes eu só usava <html> e não tinha esse problema!

 

Como devo fazer?

 

Valeu!!

Tem link do site!

 

fica mais facil te ajudar!

 

talvez ajude

 

http://www.maujor.com/tutorial/rodape/roda...a-pagina-7.html

 

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rasp    3

Rasp
Postado

Opa galera beleza?

Estava tendo também problema com DIV height 100%, dei uma lida nos tutoriais do maujor e pronto consegui resolver meu problema, porém me apareceu outro.

 

Seguinte... para que o rodapé do site fique posicionado no rodapé do navegado e declarado position: absolute, até aí tudo ok, necessitei fazer um margin bottom e tudo ficou ok, porém, o topo também necessito fazer o mesmo, logo declarei como absoluto, pois testei várias outras formas e de jeito nenhum eu consegui e necessito colocar o conteudo do site, porém este esta trepando no topo, e não queria ter de utilizar margin pra alinhar tudo abaixo do topo.

 

Será que alguém poderia me dar uma luz?

 

Segue o html e o css:

 

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="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
</head>
<body>

	<div id="site">
		<div id="topo"></div>

		<ul id="menu-principal">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>

		<div id="rodape"></div>
	</div>

</body>
</html>

 

CSS:

html, body {
	height: 100%;
	background: #fff;
}

#site, ul#menu-principal, #topo, #meio , #rodape {
	width: 766px;
	background: #fff;
}

#site {
	min-height: 100%;
	margin: 0 auto;
	position: relative;
	border-left: 1px solid #3d3d3d;
	border-right: 1px solid #3d3d3d;
	background: #3d3d3d url(../images/bg_site.gif) repeat-y left;
}

* html, #site { height: 100%; }


/* =====================================
Topo
===================================== */

#topo {
	height: 116px;
	top: 0;
	margin: 10px 0 0 0;
	position: absolute;
}

ul#menu-principal {
	height: 64px;
	clear: both;
	background: purple;
}


/* =====================================
Meio
===================================== */

#meio {
	height: auto;
	padding: 0 0 91px 0;
}


/* =====================================
Rodapé
===================================== */

#rodape {
	height: 61px;
	bottom: 0;
	margin: 0 0 10px 0;
	clear: both;
	position: absolute;
	background: #ebebeb;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

a alternativa é controlar com margin-top, igual fez com o margin bottom

 

mas pode tentar dessa forma aqui!!!

 

eu não testei

 

pode ser que o resultado não seja o esperado

 

abraço

 

CODE

<!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="pt-br" lang="pt-br">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Layout by AprendaCSS.wordpress.com</title>

<style type="text/css">

* { margin: 0; padding: 0; } /** CSS RESET http://aprendacss.wordpress.com/2008/06/24/css-reset/ */

 

html, body {

height: 100%;

background: #FFF;

}

 

#site, ul#menu-principal, #topo, #meio , #rodape {

width: 766px;

background: #FFF;

}

 

#site {

min-height: 100%;

margin: 0 auto;

position: relative;

border-left: 1px solid #3D3D3D;

border-right: 1px solid #3d3d3d;

background: #3D3D3D url(../images/bg_site.gif) repeat-y left left;

}

 

* html, #site { height: 100%; }

 

 

/* =====================================

Topo

===================================== */

 

#topo {

height: 116px;

margin: 10px 0 0 0;

}

 

ul#menu-principal {

height: 64px;

background-color: purple;

}

 

 

/* =====================================

Meio

===================================== */

 

#meio {

height: 500px;

padding: 0 0 91px 0;

overflow: auto;

}

 

 

/* =====================================

Rodapé

===================================== */

 

#rodape {

height: 61px;

bottom: 0;

margin: 0 0 10px 0;

position: absolute;

background: #EBEBEB;

}

</style>

</head>

<body>

 

<div id="site">

<div id="topo"></div>

 

<ul id="menu-principal">

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

</ul>

 

<div id="meio">

Conteudo <br />onteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />

Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />onteudo <br />

Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />

Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />

Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />Conteudo <br />

</div>

<div id="rodape">rodape</div>

</div>

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rasp    3

Rasp
Postado

Opa Aprendiz,

Eu já uso CSS Reset, so esqueci de colocar no cod que está aqui, no exemplo que está online está utilizando ele...

Como você falou acho que terei de usar mesmo o margin-top, pelo menos não vejo outra alternativa também.

 

* {
	margin: 0;
	border: 0;
	padding: 0;
	outline: 0;
	color: #000;
	list-style: none;
	font: 10px "Trebuchet MS", Verdana, Arial, Helvetica, Tahoma, sans-serif;
	font-weight: normal;
	text-decoration: none;
}

Caso eu consiga resolver de outra forma, posto aqui!

 

Abração!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

sem margin top a alternativa é usar um layout fixo e colocar um overflow na div central

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito