Ir para conteúdo

POWERED BY:

Arquivado

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

Wellington09

[Resolvido] layout

Por , em Desenvolvimento frontend

Recommended Posts

Wellington09    1

Wellington09
Postado

Bom dia pessoal estou precisando de uma ajudinha em um layout que estou criando.

 

O que eu quero é que o menu de cor preta do lado esquerdo da tela siga a div de cor azul quando ele aumentar o comprimento(height) na medida que eu for criando campos nesta div, porém apesar do menu ter o valor height:100%; ele não acompanha a div e nem a tag section de cor vermelha está acompanhando a div

 

criei a tela abaixo rapidinho só para mostrar o problema que estou tendo , mas na verdade o meu codigo CSS e HTML não é está bagunça

<!DOCTYPE html>
<html lang="pt-br">
 	<head>
     	<meta charset="utf-8">
   	<title>teste</title>
	<link href="https://reset5.googlecode.com/hg/reset.min.css" media="screen" rel="stylesheet">
<style>
html, body
{
background:#CCC;
color:#333;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
height:100%;
}

h2
{
 	background:#a5b8da;
color:#FFF;
}

section
{
background:red;
display:inline-block;
height:100%;
width:100%;
}

p
{
clear:both;
display:block;
margin:10px 0;
line-height:20px;
}

div
{
background:blue;
float:left;
width:92.2%;
z-index:0;
}

nav
{
background:#333;
border-right:1px #CCC solid;
float:left;
height:100%;
width:58px;
}

nav ul, nav li{list-style:none;}

nav ul li
{
border-bottom:1px #313131 solid;
border-top:1px #595959 solid;
height:36px;
line-height:36px;
}

nav ul li a
{
color:#FFF;
display:block;
height:56px;
width:100%;
}
</style>
 	</head>

   <body>
   	<section>
       	<nav>
           	<ul>
               	<li><a href="#">menu 01</a></li>
               	<li><a href="#">menu 02</a></li>
               	<li><a href="#">menu 03</a></li>
               	<li><a href="#">menu 04</a></li>
               	<li><a href="#">menu 05</a></li>
               	<li><a href="#">menu 06</a></li>
               	<li><a href="#">menu 07</a></li>
               </ul>
           </nav>
		<h2>titulo</h2>
       	<div>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           	<p>teste</p>
           </div>
       </section>
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pesquise por faux columns

http://wbruno.com.br/blog/2011/03/12/faux-columns-sem-imagens/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wellington09    1

Wellington09
Postado

coloquei o overflow:hidden; para a tag section e na tag div eu coloquei padding-bottom:500px; e margin-bottom:500px; para ver se ele mostrava o resto do texto que esta dentro da div , só que ele corta o texto.

acrescentei os textos

<p>teste A</p>

<p>teste A</p>

<p>teste A</p>

....

só que este texto não aparece na pagina , pois está sendo cortado pelo overflow:hidden;

se eu colocar o overflow:scroll; ai vai aparecer os texto , porem o menu não vai seguir a tag section e vai aparecer duas barras de rolagem

 

e desculpa pela duplicação da postagem , juro que procurei o post antigo e não consegui achar

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

A implementação correta do que eu sugeri, fica assim:

 

section {
background:red;
display:inline-block;
width:100%;
overflow: hidden;
}
div {
background:blue;
width:92.2%;
z-index:0;
float: left;  
padding-bottom: 1000em;  
margin-bottom: -999.5em;
}
nav {
background:#333;
border-right:1px #CCC solid;
width:58px;
float: left;  
padding-bottom: 1000em;  
margin-bottom: -999.5em;     
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wellington09    1

Wellington09
Postado

eu tinha feito isso porem não tinha funcionado pq eu não apaguei o height:100%; da tag section como eu quero que o menu ainda continue com 100% da tela mesmo que a div não estore a barra de rolagem, acabei acrescentendo o min-height:100%; e agora está funcionando perfeitamente , muito obrigado pela ajuda William vlw mesmo quebrou um galhão.

 

só queria uma ultima ajuda sua para entender este

margin-bottom:-999.5em;

padding-bottom:1000em;

 

eu sempre utilizo o px

o que seria este em e pq este valores no margin e no padding, tem que ser exatamente estes valores ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

1em = 12px, se o valor do font-size daquele elemento for 12px.

 

1em corresponde a 100% do valor do font-size do elemento em que você está.

2em é o dobro, 0.5em é metade.. e por ai vai.

 

 

Não precisa ser necessariamente esses valores.. mas sim algum valor "relativamente grande", para que as colunas se igualem.

Retire o overflow, apenas para testar, e veja que as 2 colunas se esticam bastante lá para baixo.

 

é assim q essa técnica funciona.

 

 

[]s!

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