Ir para conteúdo

POWERED BY:

Arquivado

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

Daniel-Lopes

[Resolvido] Utiliza largura 100% com rolagem horizontal

Por , em Desenvolvimento frontend

Recommended Posts

Daniel-Lopes    1

Daniel-Lopes
Postado

Pessoal, estou precisando fazer um layout.

para entenderem o que estou tendo dúvida preparei uma imagem para exemplificar o que eu quero.

 

exemplo.png

 

 

Explicando:

Preciso que Div em vermelho ocupe 100% na altura e todo restante da largura e que ela tenha barra de rolagem horizontal

So que quando a altura começar a sobrescrever o conteudo a rolagem vertical tb apareça...

 

e aí eu não estou conseguindo, penso que se usar javascript ficará mais facil mas tava querendo evitar o uso de javascript para evitar incompatibilidade com aparelhos portateis (android, IOS e etc)

 

veja o que eu consegui (coloquei cores diferentes para facilitar a visualização, note que quando a janela do navegador for menor o final da div 4 a barra horizontal some e não mostra a barra vertical)

http://localhost/sites/project_social/test2.html

 

 

codigo:

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #C2F2B7;
background-image: url(images/bar_write.png);
background-repeat: repeat-y;
background-position: left top;
}
#divBarH {
min-height:100%;
height:auto;
width:174px;
margin: 0px;
position: absolute;
z-index: 2;
}

* html #divBarH{
height:100%;
}
#divLogo {
float: left;
height: 43px;
width: 174px;
background-color: #FFF;
text-align: center;
}
#divBarV {
height: 43px;
width: 100%;
background-repeat: repeat-x;
float: left;
background-color: #2AB706;
}
#logoBotton {
height: 100%;
width: 172px;
background-attachment: fixed;
background-image: url(d.png);
background-repeat: no-repeat;
background-position: left bottom;
position: absolute;
left: 0;
top: 0;
}
#divATimeLine {
overflow: hidden;
margin-left: 174px;
min-height:100%;
height:auto;
background-color: #03F;
position: relative;
}
#divMTimeLine {
height: 55px;
width: 100%;
background-color: #6666FF;
float: left;
}
#divTimeLine {
min-height:100%;
height:auto;
overflow: auto;
position: absolute;
width: 100%;
}
#divCTimeLine {
margin-top: 98px;
background-color: #C90;
width: 5000px;
height: 300px;
}
</style>
</head>

<body>

<div id="divBarH">
<div id="divLogo"></div>
</div>
<div id="divATimeLine">
<div id="divBarV"> menu fixo 1</div>
<div id="divMTimeLine">menu fixo 2</div>
<div id="divTimeLine">
	<div id="divCTimeLine">
		div4 - conteudo
	</div>
</div>
</div>


</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-Lopes    1

Daniel-Lopes
Postado

Brigadão, mas eu mudei a ideia visual será com scroll horizontal mas usei a barra fixa (tanto a horizontal quanto a vertical)

 

no caso do overflow eu ja utilizo ele. estou tendo problemas é na compatibilidade com entre navegadores.

Até cheguei num resultado legal usando javascript. mas quando se testa o site nos tablets e você vira o tablet usando ele em pe ou deitado o resultado não me agradou muito.

 

de qualquer forma obrigado (e peço desculpas pois postei o link de testes errado postei o link em local host e não com o meu ip para que pudessem visualizar)

 

podem fechar o topico!

Opa ve se isso te ajuda

 

 

overflow: scroll;

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