Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, estou precisando fazer um layout.
para entenderem o que estou tendo dúvida preparei uma imagem para exemplificar o que eu quero.
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.sistemampa.com.br/img_bfw/exemplo.png&key=53c428c8f997a7e157778bba7768207691c798fc4db6e5e005bf55fe2ab53537" alt="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">height: 100%;
}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>Carregando comentários...