CSS não resolve

pctecnologia · Agosto 14, 2013

Olá,

Pessoal, estou tentando algo que to achando que é impossível com css.

O pior é que me parecia tão simples no inicio.

Preciso de um layout com duas colunas (esquerda com 305 pixel - direita fluindo até o final da tela), porém, é impossível fazer isso!

Já tentei de tudo e não vai! O tamanho fica limitado ao tamanho da janela sem a rolagem quando o conteúdo da direita é maior que a tela e precisa rolar o texto.

Alguém tem alguma ideia de como ajudar?

O código que to usando é

* {

border: 0px;

margin: 0px;

padding: 0px;

font-size:12px;

line-height:18px;

font-family:Arial, Helvetica, sans-serif;

}

html{

background:url(imagens/fundo01.jpg) 100% 100% repeat;

}

html,body{

min-height:100%;

height:100%;

}

* html #tudo{

min-height:100%;

height:auto;

}

#tudo{

width:100%;

min-height:100%;

height:auto;

background-color:#CCC;

position:absolute;

}

#colEsq{

float:left;

width:305px;

position:relative;

background-color:#F00;

}

#colDir{

float:left;

position:relative;

background-color:#333;

}

:(

Buchechafs · Agosto 14, 2013

Era bom você trabalhar só com % se você colocar 20% na div #colEsq e 80% na div #colDiv no width funciona

LucasCairesF · Agosto 14, 2013

PcTecnologia acho que isso resolve:

 
<style>
*{margin:0; padding:0;}
#divum  { width:350px; height:auto;; background:#666;}
#divdois {width:100%; height:100%; background:#666;}
</style>
 
 
 
<table> 
       <tr>
 
<td width="350" valign="top">   
 
<div id="divum">
Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>
 
 
</div>    
 
 </td>
 
<td width="100%" valign="top">  
 
 <div id="divdois">
 
 
Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita
 
 
 
</div>    
 
 
 
 
 </td>
 
      </tr>
</table>

pctecnologia · Agosto 14, 2013

Legal! Mas ainda não funcionou na questão ALTURA 100%!

:(

Já pesquisei de tudo e não consigo fazer estas colunas descerem a tela até o final mesmo quando o conteúdo é maior que a tela e surge a rolagem!

LucasCairesF · Agosto 14, 2013

Corrigido:

 
<style>
*{margin:0; padding:0;}
#divum  { width:350px; height:100%; background:#666;}
#divdois {width:100%; height:100%; background:#666;}
</style>
 
 
 
<table height="100%"> 
       <tr>
 
<td width="350" valign="top" >   
 
<div id="divum">
Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>Aqui o conteudo da  esquerda <br>
 
 
</div>    
 
 </td>
 
<td width="100%" valign="top">  
 
 <div id="divdois">
 
 
Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita<br>Aqui o conteudo da  direita
 
 
 
</div>    
 
 
 
 
 </td>
 
      </tr>
</table>

zcommand · Agosto 14, 2013

Peço desculpas, mas eu sou meio lerdo das ideias e não entendi bem oq está necessitando. acho que vc que 2 colunas uma do lado da outra, a coluna da direita vc quer com um tamanho fixo de 305px e a da esquerda vc quer que ela vá crescendo conforme o conteúdo? é isso? se o meu cabeção conseguiu entender direito oq vc quer não é tal complicado assim. oq vc pode fazer por exemplo é colocar uma posição absoluta na div direita com um left do tamanho da div esquerda ou seja 305px assim ela afasta esse tamanho do lado esquerdo com uma largura q pode ser 100% ele vai seguindo sempre na horizontal.

pctecnologia · Agosto 14, 2013

Sim, até ai eu cheguei zcommand mas precisava que ela ficasse com 100% de altura também e só consegui usando as dicas e tabelas que o lucastas2 passou acima!

achei que com css apenas daria para fazer!

:/

am designer · Agosto 14, 2013

faz pouco tempo o Maujor escreveu sobre isso. Da uma lida ve se ajuda Abraço

http://www.maujor.com/blog/2013/03/08/por-que-height-100-nao-funciona/

zcommand · Agosto 14, 2013

Nossa nada a ver oq eu falei né. kkk. vc tava querendo a altura e não a largura, por isso falei q era meio lerdo. kkkk Mas o link q o amigo am designer passou do Maujor explica bem isso, acho que vc vai conseguir resolver com isso.

pctecnologia · Agosto 14, 2013

Legal! Vou dar uma lida! Ver se eu me entendo com esse monte de divs!

\o/

Por hora a solução mescla entre divs e tables resolveu o problema!

:)

Cacilds · Agosto 14, 2013

Apelando pro jQuery mode [ X ] ON [ ] OFF

var h = jQuery('html').height();
	
jQuery('#suaDiv').css({
   'min-height' : h + 'px'
});

pctecnologia · Agosto 14, 2013

Cacilds, tb fui por esse caminho hehehe mas não queria saca, queria css puro! mas não rola pelo jeito sem gambi!

am designer · Agosto 14, 2013

Qualquer coisa é só gritar ae.

isso, jQuery Salva vidas kkkkkkk Da certo tbm. Mas altura responsiva é mesmo uma chatice. Falooou abraço

Cacilds · Agosto 15, 2013

Cacilds, tb fui por esse caminho hehehe mas não queria saca, queria css puro! mas não rola pelo jeito sem gambi!

Height geralmente é uma dor de cabeça mesmo.

Mas no post que o Major fez é bem explicado o motivo. A propriedade height só irá funcionar se sua área conhecer a altura do seu elemento pai. Se você diz para ele ser height:100% uma área qualquer sem ter o seu tamanho definido é o mesmo que se fazer a seguinte pergunta: Quanto é 100% de nada?

Mas a POG tá ae para nos ajudar. Hahaha!

[]'s

pctecnologia · Agosto 15, 2013

Então, o problema no caso é o quadro (div) #tudo, ele que não fica 100% em relação ao tamanho do documento!

Até fica, mas na verdade, ele não conta a barra de rolagem, ele só enxerga o tamanho da tela visivel e não a tela visivel + a rolagem!

Tentei colocar na div #tudo como posição relativa, com altura 100%, mas não rolou!

Cacilds · Agosto 15, 2013

Então, o problema no caso é o quadro (div) #tudo, ele que não fica 100% em relação ao tamanho do documento!

Até fica, mas na verdade, ele não conta a barra de rolagem, ele só enxerga o tamanho da tela visivel e não a tela visivel + a rolagem!

Tentei colocar na div #tudo como posição relativa, com altura 100%, mas não rolou!

Se você não utilizar o float na sua segunda div? Ha a necessidade dela está voando na tela mesmo?

Porque aí cê pode fazer algo mais ou menos assim:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Página de Teste</title>

		<style type="text/css">
			body, html {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			#todo {
				background: #ccc;
				height:auto;
				min-height: 100%;
			}

			#todo h1 {
				font: 2em Arial;
				font-weight:bold;
				color:#069;
				padding: 10px 0;
				margin: 0;
				display: block;
				text-align: center;
			}

			#colunaUm {
				float: left;
				height: 350px;
				width: 28%;
				background: #333;
				color: #fff;
				padding: 10px;
				font: 1em "Trebuchet MS", Arial;
			}
			#colunaDois {
				display:inline-block;
				margin-left:1%;
				height:auto;
				min-height: 100%;
				width: 65%;
				background: #e1e1e1;
				color: #000;
				padding: 10px;
				font: 1em "Trebuchet MS", Arial;
			}
		</style>

	</head>
	<body>
		<div id="todo">
			<h1>Página de Teste</h1>
			<div id="colunaUm">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
			</div>
			<div id="colunaDois">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>

				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>

				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>

				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>

				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>

			</div>
		</div>
	</body>
</html>

Declara a segunda com o display:inline-block forçando o elemento pai a acompanhar o tamanho da div filho.

[]'s

pctecnologia · Agosto 15, 2013

Cacilds, alterei o codigo e comentei para vc entender melhor o que eu preciso:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Página de Teste</title>

<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}

#todo {
background: #ccc;
height:auto;
min-height: 100%;
}

#todo h1 {
font: 2em Arial;
font-weight:bold;
color:#069;
padding: 10px 0;
margin: 0;
display: block;
text-align: center;
}

#colunaUm {
float: left;
height: 100%; /* ISSO NÃO FUNCIONA, OU SEJA, NÃO VAI ATÉ O FINAL DA TELA */
width: 350px;
background: #333;
color: #fff;
padding: 0px;
font: 1em "Trebuchet MS", Arial;
}
#colunaDois {
display:inline-block;
height:auto;
min-height: 100%; /* ISSO NÃO FUNCIONA, OU SEJA, NÃO VAI ATÉ O FINAL DA TELA */
width: 60%; /* ISSO DEVERIA SER 100% restante da tela mas não fica, qndo coloco 100% ele cai pra baixo sem o float:left */
background: #e1e1e1;
color: #000;
padding: 0px;
font: 1em "Trebuchet MS", Arial;
}
</style>

</head>
<body>
<div id="todo">
<div id="colunaUm">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="colunaDois">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

</div>
</div>
</body>
</html>

Cacilds · Agosto 15, 2013

Cacilds, alterei o codigo e comentei para vc entender melhor o que eu preciso:

Ok, agora entendi qual deveria ser o resultado

No tamanho da div 2 você pode fazer da seguinte forma para ocupar todo o restante da tela:

width: -webkit-calc(100% - 305px); /* O segundo valor é o tamanho do height da primeira DIV */

Pressupondo que ambas as divs não têm padding nem margin-left e right, agora fazer ambas irem até o final da tela... Essa parte complicou. rsrs

Mas aí também se o browser não tem suporte pro CSS3(leia-se Internet Explorer), lascou-se também.

É.. CSS puro, puro.. não estou visualizando uma forma não. Embora seja uma desafio interessante, acredito que a melhor forma é você utilizar o javascript mesmo. :pinch:

pctecnologia · Agosto 15, 2013

Parece simples neh?!

Mas me obrigou a usar jquery junto! Não teve outro jeito!

Bom, obrigado pela ajuda! Se eu descobrir algo novo, eu posto aqui!

\o/

Abraços

luqfreitas · Agosto 16, 2013

cara. tentei aqui, eu consegui jogar pro lado e tal mas só movendo ela.. n sei se é uma solução aconselhável mas vou postar aqui p vc ver

HTML

<!doctype>

<html>

<head>

<title> teste duas colunas </title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="top">

</div>

<div id="all">

<div id="coluna1">

</div>

<div id="coluna2">

Estratégias em um Novo Paradigma Globalizado

No mundo atual, a contínua expansão de nossa atividade agrega valor ao estabelecimento dos métodos utilizados na avaliação de resultados. Gostaria de enfatizar que a adoção de políticas descentralizadoras deve passar por modificações independentemente do sistema de participação geral. Do mesmo modo, o julgamento imparcial das eventualidades aponta para a melhoria do processo de comunicação como um todo. No entanto, não podemos esquecer que o consenso sobre a necessidade de qualificação pode nos levar a considerar a reestruturação dos níveis de motivação departamental.

</div>

</div>

</body>

</html>

CSS

* { margin:0; padding:0; background-color: #666; font-size:20px; color:#fff;}

#top { height:50px; width:100%; background-color: #c3c3c3;}

#all {width:1000px; height:100%; background-color:#fff; margin:auto;}

#coluna1 { height:305px;width:500px; background-color:#c6f; position:relative; float:left;}

#coluna2 {width:500px; height:100%; min-height: 1000px; background-color:#000; position:relative; left:500px;}

n aconselho isso...

abraço..

Arquivado

CSS não resolve

Recommended Posts

pctecnologia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buchechafs 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

LucasCairesF 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

pctecnologia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

LucasCairesF 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

zcommand 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

pctecnologia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

am designer 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

zcommand 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

pctecnologia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cacilds 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pctecnologia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

am designer 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cacilds 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pctecnologia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cacilds 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pctecnologia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cacilds 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pctecnologia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

luqfreitas 0