Jump to content

  2. →
  3. →
  4. →

Photo

Estender Div Em 100% De Altura

Started By Fidelix, 06/12/2009, 18:52

  • Faça o login para participar
3 replies to this topic

#1 Fidelix

Fidelix

    Novato no fórum

  • Usuários
  • 9 posts
  • Sexo:Não informado

Posted 07/12/2009, 07:11

Olá pessoal, estou precisando muito de ajuda pois estou tendo problemas com algo bem simples.

Estou tentando fazer com que uma barra sólida se estenda por 100% de altura na minha página, mas SÓ CONSIGO QUE ELA SE ESTENDA com tamanho fixo. (ex: 800px;)

Veja o HTML em:
http://codepaste.net/4vzond

Veja o CSS em:
http://codepaste.net/i5g2k1

Agradeço qualquer tipo de ajuda.
Já tentei de diversas maneiras, com e sem containers. Obrigado!

Posted Image

Se serve de ajuda, aí está a imagem explicando o que quero fazer.
Tem 2 divs cinzas, uma na direita e uma na esquerda, que quero estender até o rodapé.

#2 Victor Hugo Odo

Victor Hugo Odo

    Doutor

  • Administradores
  • 779 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP
  • Interesses:Compartilhar conhecimentos!

Posted 07/12/2009, 07:48

Olá,

Para facilitar, por favor poste o link da página.

Bons ventos.

(ok2)

Fórum WMO - Administrador

#3 Fidelix

Fidelix

    Novato no fórum

  • Usuários
  • 9 posts
  • Sexo:Não informado

Posted 09/12/2009, 10:57

A página está no meu computador, rodando php.

Fica difícil linkar hehehe

Obrigado por responder Victor, eu estou no aperreio aqui, dou um F5 a cada minuto nessa página... hehe

Poxa, ninguém vai ajudar mesmo?

Aqui está o código HTML gerado no Browser.

<!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>
  <base href="http://localhost/j/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - O sistema dinâmico de portais e gerenciador de conteúdo" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Elevasul</title>
  <link href="/j/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/j/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/j/templates/fdx_elevasul/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link rel="stylesheet" href="/j/media/system/css/modal.css" type="text/css" />
  <link rel="stylesheet" href="http://localhost/j/components/com_k2/css/style.css" type="text/css" />
  <link rel="stylesheet" href="/j/modules/mod_rokajaxsearch/css/rokajaxsearch.css" type="text/css" />
  <link rel="stylesheet" href="/j/modules/mod_rokajaxsearch/themes/light/rokajaxsearch-theme.css" type="text/css" />
  <link rel="stylesheet" href="http://localhost/j/modules/mod_yoo_login/mod_yoo_login.css.php" type="text/css" />
  <script type="text/javascript" src="/j/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/j/media/system/js/modal.js"></script>
  <script type="text/javascript" src="http://localhost/j/components/com_k2/js/k2.js"></script>
  <script type="text/javascript" src="/j/media/system/js/caption.js"></script>
  <script type="text/javascript" src="/j/modules/mod_rokajaxsearch/js/rokajaxsearch.js"></script>
  <script type="text/javascript">

		window.addEvent('domready', function() {

			SqueezeBox.initialize({});

			$$('a.modal').each(function(el) {
				el.addEvent('click', function(e) {
					new Event(e).stop();
					SqueezeBox.fromElement(el);
				});
			});
		});
var K2RatingURL = 'http://localhost/j/';
window.addEvent((window.webkit) ? 'load' : 'domready', function() {
				window.rokajaxsearch = new RokAjaxSearch({
					'results': ' Resultados',
					'close': '',
					'websearch': 0,
					'blogsearch': 0,
					'imagesearch': 0,
					'videosearch': 0,
					'imagesize': 'MEDIUM',
					'safesearch': 'MODERATE',
					'search': ' Buscar...',
					'readmore': ' Ler mais...',
					'noresults': ' Nenhum resultado',
					'advsearch': ' Busca Avan&ccedil;ada',
					'page': ' P&aacute;gina',
					'page_of': ' de',
					'searchlink': 'http://localhost/j/index.php?option=com_search&amp;view=search&amp;tmpl=component',
					'advsearchlink': 'http://localhost/j/index.php?option=com_search&amp;view=search',
					'uribase': 'http://localhost/j/',
					'limit': '10',
					'perpage': '3',
					'ordering': 'popular',
					'phrase': 'exact',
					'hidedivs': '',
					'includelink': 1,
					'viewall': ' Ver todos os resultados',
					'estimated': ' estimado',
					'showestimated': 1,
					'showpagination': 1,
					'showcategory': 1,
					'showreadmore': 1,
					'showdescription': 1
				});
			});
  </script>
  <!--[if IE 7]>
				<link href="http://localhost/j/components/com_k2/css/ie7.css" rel="stylesheet" type="text/css" />
				<![endif]-->
				<!--[if lte IE 6]>
				<link href="http://localhost/j/components/com_k2/css/ie6.css" rel="stylesheet" type="text/css" />
				<![endif]-->

<link rel="stylesheet" href="/j/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/j/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/j/templates/fdx_elevasul/css/template.css" type="text/css" />
<link rel="stylesheet" href="/j/templates/fdx_elevasul/css/orange.css" type="text/css" />
<link rel="stylesheet" href="/j/templates/fdx_elevasul/css/white_bg.css" type="text/css" />
<!--[if lte IE 6]>
<link href="/j/templates/fdx_elevasul/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->


<script type="text/javascript" src="/j/templates/fdx_elevasul/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('top-panel');
	
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
	mySlide.hide();
});</script>
</head>


<body id="page_bg" class="color_orange bg_white width_fmax">

<a name="up" id="up"></a>
<div id="geral"><div class="center" align="center">
	<div id="wrapper">
		<div id="search">
				
		</div>
			
		<div id="wrapper_r">

			<div id="header">

				<div id="header_l">
					<div id="header_r">
							<div id="logo">
								<div id="menuh6"><a href="/j/index.php/contato" class="x"></a></div>
								<div id="menuh5"><a href="/j/index.php/campanha" class="x"></a></div>
								<div id="menuh4"><a href="/j/index.php/usados" class="x"></a></div>
								<div id="menuh3"><a href="/j/index.php/produtos" class="x"></a></div>
								<div id="menuh2"><a href="/j/index.php/empresa" class="x"></a></div>
								<div id="menuh1-y"><a  class="x"></a></div>
							</div>
							
					</div>
				</div>				
			</div>

			<!--<div id="tabarea">
				<div id="tabarea_l">
					<div id="tabarea_r">
						<div id="tabmenu">
						<table cellpadding="0" cellspacing="0" class="pill">
							<tr>
								<td class="pill_l">&nbsp;</td>
								<td class="pill_m">
								<div id="pillmenu">
									
								</div>
								</td>
								<td class="pill_r">&nbsp;</td>
							</tr>
							</table>
						</div>
					</div>
				</div>
			</div>-->
			<!--<div id="pathway">
				
			</div></div>
			<div class="clr"></div>-->
				

			
			

				<div id="caixesquerda" ></div>
				<div id="caixadireita" ></div>
			
			<div id="top-panel"><div id="loginu">		<div class="module">
			<div>
				<div>
					<div>
											
<span class="quick" style="display: block;">
	<span class="yoo-login">
	
				
				
		<span class="login">
		
			<form action="index.php" method="post" name="login">
						
			<span class="username">
			
				<input type="text" name="username" size="18" alt="Nome de Usuário" value="Nome de Usuário" onblur="if(this.value=='') this.value='Nome de Usuário';" onfocus="if(this.value=='Nome de Usuário') this.value='';" />
				
			</span>
			
			<span class="password">
			
				<input type="password" name="passwd" size="10" alt="Senha" value="Senha" onblur="if(this.value=='') this.value='Senha';" onfocus="if(this.value=='Senha') this.value='';" />
				
			</span>

			<input type="hidden" name="remember" value="yes" />
			
			<span class="login-button-icon">
				<button value="" name="Submit" type="submit" title="Login"></button>
			</span>
			
						<span class="lostpassword">
				<a href="/j/index.php/component/user/reset" title="Esqueceu sua senha?"></a>
			</span>
						
						<span class="lostusername">
				<a href="/j/index.php/component/user/remind" title="Esqueceu seu usuário?"></a>
			</span>
						
						<span class="registration">
				<a href="/j/index.php/component/user/?task=register" title="Crie uma conta"></a>
			</span>
						
						
			<input type="hidden" name="option" value="com_user" />
			<input type="hidden" name="task" value="login" />
			<input type="hidden" name="return" value="aHR0cDovL2xvY2FsaG9zdC9qLw==" />
			<input type="hidden" name="7b9b8a95f478338b5e58d91c8d5bc949" value="1" />
		</form>
		</span>
		
				
	</span>
</span>					</div>
				</div>
			</div>
		</div>
	</div>		<div class="module">
			<div>
				<div>
					<div>
											<form name="rokajaxsearch" id="rokajaxsearch" class="light" action="http://localhost/j/" method="get">
<div class="rokajaxsearch">
	<input id="roksearch_search_str" name="searchword" type="text" class="inputbox" value=" Buscar..." />
	<input type="hidden" name="searchphrase" value="exact"/>
	<input type="hidden" name="limit" value="" />
	<input type="hidden" name="ordering" value="popular" />
	<input type="hidden" name="view" value="search" />
	<input type="hidden" name="Itemid" value="99999999" />
	<input type="hidden" name="option" value="com_search" />

	
	<div id="roksearch_results"></div>
</div>
<div id="rokajaxsearch_tmp" style="visibility:hidden;display:none;"></div>
</form>					</div>
				</div>
			</div>
		</div>
	</div><div id="sub-panel"><a href="#" id="toggle"><span>Login / Busca</span></a></div>
			<div id="whitebox">
				<div id="whitebox_t">
					<div id="whitebox_tl">
						<div id="whitebox_tr"></div>
					</div>
				</div>

				<div id="whitebox_m">
				<div id="area">
									

						<div id="leftcolumn">
												</div>

												<div id="maincolumn_full">
																				
<table class="nopad">
								<tr valign="top">
									<td>
										<div class="componentheading">
	Elevasul</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
					<div>
		
<table class="contentpaneopen">
<tr>
		<td class="contentheading" width="100%">
					teste			</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/j/index.php?view=article&amp;id=1:teste&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/j/images/M_images/pdf_button.png" alt="PDF"  /></a>	</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/j/index.php?view=article&amp;id=1:teste&amp;tmpl=component&amp;print=1&amp;layout=default&amp;page=" title="Imprimir" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/j/images/M_images/printButton.png" alt="Imprimir"  /></a>	</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/j/index.php/component/mailto/?tmpl=component&amp;link=aHR0cDovL2xvY2FsaG9zdC9qL2luZGV4LnBocC9jb21wb25lbnQvY29udGVudC9hcnRpY2xlLzEtdGVzdGU%3D" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/j/images/M_images/emailButton.png" alt="E-mail"  /></a>	</td>
		</tr>
</table>
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis diam arcu, non suscipit odio. Mauris hendrerit eros sed mauris dapibus interdum. Vestibulum sed lacus sed lectus ultricies commodo. Pellentesque id dolor ante, at consectetur sem. Etiam eros turpis, hendrerit quis suscipit eu, sodales vel est. Suspendisse vehicula, quam convallis tincidunt tristique, mi libero tempor turpis, id fringilla erat massa a est. Cras varius, justo at pharetra laoreet, enim dui dictum dui, non iaculis justo ipsum id justo. Morbi id turpis ut neque gravida pellentesque. Morbi tristique sem eget est vehicula pulvinar eget et massa. Pellentesque sollicitudin tincidunt velit, at faucibus ante pharetra et. Aliquam ac lectus at magna viverra malesuada. Donec rutrum elit eu tortor feugiat mollis. Praesent ac ligula est. <br /><br />Suspendisse sit amet massa vel eros sodales placerat at nec felis. Sed vitae justo libero, eu semper diam. Sed purus leo, condimentum quis congue eu, viverra quis justo. Praesent vitae magna non nunc dignissim suscipit. Nulla egestas faucibus scelerisque. Fusce nulla ligula, tincidunt sit amet euismod nec, tristique dignissim massa. Curabitur id tellus a est condimentum varius quis nec ante. Vivamus eget pharetra mauris. Vivamus semper condimentum leo, vel hendrerit ante eleifend sed. Vivamus porttitor massa et lorem viverra sed semper odio ultricies. Fusce fermentum viverra velit congue congue. Vestibulum fermentum pulvinar nisi, a fringilla velit mattis sed. Nam sit amet erat in elit imperdiet semper. Vestibulum fermentum risus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id risus diam. Nullam lobortis viverra ipsum, non faucibus magna volutpat non. Duis feugiat varius velit, in facilisis augue ultrices dictum. Phasellus dignissim quam sit amet arcu molestie commodo. Ut convallis odio ac arcu laoreet rhon</p></td>
</tr>



</table>
<span class="article_separator">&nbsp;</span>
		</div>
		</td>
</tr>


</table>

										
									</td>
																	</tr>
							</table>

						</div>
						<div class="clr"></div>
					</div>
					<div class="clr"></div>	
				</div>

				<div id="whitebox_b">
					<div id="whitebox_bl">
						<div id="whitebox_br"></div>
					</div>
				</div>
			</div>

			<div id="footerspacer"></div>
		</div>

		<div id="footer">
			<div id="footer_l">
				<div id="footer_r">
					<p id="syndicate">
						
					</p>
					<p id="power_by">
	 				 	Desenvolvido por <a href="http://www.felipefidelix.com">Felipe Fidelix</a>.
					</p>
				</div>
			</div>
		</div>
	</div>
</div></div></div>


</body>
</html>

Edição feita por: Fidelix, 09/12/2009, 10:58.

#4 André Manoel

André Manoel

    Doutor

  • Usuários
  • 996 posts
  • Sexo:Masculino
  • Localidade:Brasilia

Posted 16/12/2009, 10:35

O código está meio dificil de se entender!
Qual o id da div que você quer que acompanhe o tamanho da página?

Antes de você me dizer a div posso te dar uma sugestão!

O css trabalha com cascata! Herança...! Então tudo o que você faz é herdado!

Faça o seguinte...

1 - Identifique qual a div pai dessa div que você quer que cresça...!
2 - Coloque o atributo 
#divPai{
       height: 100%;
}

3 - Coloque o atributo 

#divQueVoceQuerAumentar{
       height: 100%;
}

Obs: Você precisa "enxergar" de onde está vindo a herança... por exemplo... se a div pai dessa barra não tiver o height: 100%; Não vai funcionar...

Se a herança da altura ocupar 100% nas divs anteriores, essa nova que você quer que ocupe toda a página... vai ocupar também...

Abração!
Iniciando na Ajuda On line...

Posted Image Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.
Voltar para CSS & Semântica (Tableless)


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq