Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde,
estou com um problema,
eu estou criando um site de uma pagina só, e para separar as paginas estou usando uma div
e colocando HEIGHT:100vh; que deixa a div(pagina) do tamanho da tela independente do conteúdo..
mas estou com um problema.. ele funciona para todos os dispositivos.. mas quando chega no iphone 4.. ele corta pois ele gera o tamanho da pagina, referente a altura do dispositivo, e nnao com referencia ao conteúdo.
é possivel reverter essa situação?, fazer com que quando a altura for menor, ele estica a pagina.
Porque com o celuar em pé ele funciona perfeitamente.. mas quando deito o celular corta parte do conteúdo.. vou colocar imagens par entenderem melhor e o link da pagina com defeito.
http://www.theoneeventos.com.br/teste
em pé
/applications/core/interface/imageproxy/imageproxy.php?img=http://4.bp.blogspot.com/--oyIEOkHAiI/VMevj0qed5I/AAAAAAAAAd0/ch334-m9-NM/s1600/IMG_9549.PNG.png&key=9e9d8596cf2ac14e5739a6ba9f01a561a2ce0f2ae72ab994e24220d7ac67159c" alt="IMG_9549.PNG.png" />
Deitado que é o com problema
/applications/core/interface/imageproxy/imageproxy.php?img=http://2.bp.blogspot.com/-8nMR6jj1isM/VMevkwKYShI/AAAAAAAAAeA/eoTcdBK7P3M/s1600/IMG_9550.PNG.png&key=c0fd5d720e21b8b25038ca325f5c90847fcea285181e9231f7cf9cd9e94aa150" alt="IMG_9550.PNG.png" />
Em Pé denovo mostrando a proxima pagina
Espero que possam me ajudar nao consigo rresolver eesse erro
abraço
/applications/core/interface/imageproxy/imageproxy.php?img=http://1.bp.blogspot.com/-q0Cn58E9JhA/VMevk5H0fhI/AAAAAAAAAd8/xRxZBpI92Uk/s1600/IMG_9551.PNG&key=3179b1620fdc6a60f545542e1af7723c04f870d3f0a979dfeae5eae4f379f053" alt="IMG_9551.PNG" />
nesse caso não funcionou, ele até sumiu o conteúdo da Home
pois não esta em height:100%
e sim em height:100vh
min-height:100vh ? :P
ah, desculpa achei q vc tava usando 100%, li rápido.
Mantenha o min-height, e faça com que ele funcione:
html, body { height: 100%; }
height:100vh;
aqui funcionou.. ele fica do tamanho da tela.. certinho
se a tela do pc tem 1000px o tamanho da div fica conforme
se tiver 100px taamanho da div eh de 100
nunca viu?
>
ah, desculpa achei q você tava usando 100%, li rápido.
Mantenha o min-height, e faça com que ele funcione:
html, body { height: 100%; }
ainda não rodou,
coloquei um conteúdo repetido para vc ver onde q ele come a div.. e também o problema não é o overflow
Essa unidade "vh" é lida em todos os navegadores e dispositivos?
Cara, sua estrutura tá muito complicada.
Vc tem diversas DIVs desnecessárias. Consegui aqui fazer funcionar o min-height, mas tive que dar 100% nessas várias DIVs q vc poderia nem ter, e tirar o position absolute do .tituloHome, q não entendi pq vc usou, já q o absolute atrapalha todo o efeito de fazer "a página crescer".
Essa unidade "vh" é lida em todos os navegadores e dispositivos?
os que eu testei OPERA FIREFOX, SAFARI CHROME
sim
só o IE q nada funciona vou ter q fazer outro site pra ele mas o resto le sim
>
Cara, sua estrutura tá muito complicada.
você tem diversas DIVs desnecessárias. Consegui aqui fazer funcionar o min-height, mas tive que dar 100% nessas várias DIVs q você poderia nem ter, e tirar o position absolute do .tituloHome, q não entendi pq você usou, já q o absolute atrapalha todo o efeito de fazer "a página crescer".
dei position absolute.. pois tem uma div anterior que contem o fundo da Home, que coloquei com css..
se eu deixo sem o position absolute, e dou um TOP:20%; ele nao funciona
e se eu coloar MARGIN-TOP:20% ele desce o conteúdo mas tamém desce a imagem de fundo
ai optei por criar essa div TITULOHOME.. que ficaria todo o conteúdo da home endende?
não sei se foi uma boa maneira.. mas funcionou. por isso deve estarr dando problema
Não foi uma boa maneira.
O absolute vai te impedir de fazer "a página crescer", vc precisa remover isso e resolver o fundo de outra maneira.
E como eu disse: está tudo muito complicado! vc tem elementos de mais, vários deles desnecessários.
O height: 100% + min-height: 100% resolve perfeitamente seu problema, mas vc precisa corrigir bastante da estrutura.
Ahh okk.. vou refazer isso...
mas e quanto as outras paginas? como eu faço
para elas se comportarem como paginas distintas? da mesma forma que esta
pois com o height:vh funcionou.. mas se eu tirar ele nao vai funcionar mais
com o min-height: 100% funciona.
Vou refazer.. Muito Obrigado
com o min-height: 100% funciona.
Criei mais ou menos a mesma situação e mesmo assim não funciona
oq pode ser?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>The One Testes</title>
<script src="[url=[https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js](https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js)][https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js](https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js)"></script>[/url]
<style>margin:0;
}height:100%;
min-height:100%;
background:#CCC;
}width:100%;
height:30px;
background:#F00;
color:#fff;
position:fixed;
opacity:0.5;
}min-height:100%;
height:100%;
width:100%;
background:#000;
color:#fff;
}
</style>
</head>
<body>
<header>
Header
</header>
<section>
section
</section>
</body>
</html> Coloquei a opacidade para você ver que esta apenas sobrepondo..
mas a section não fica em tela cheia
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>The One Testes</title>
<style>* {
margin:0;
}html, body { height: 100%; }
body { background:#CCC; }
header {
width: 100%;
height: 30px;
background: #F00;
color: #fff;
position: fixed;
opacity: 0.5;
}section {
min-height: 100%;
width: 100%;
background: #000;
color: #fff;
}#pagina1 { background: red; }
#pagina2 { background: blue; }
</style>
</head>
<body>
<header>
Header
</header>
<section id="pagina1">
Section
</section>
<section id="pagina2">
Section
</section>
</body>
</html>Estava faltando algumas coisinhas..
agora funcionou...
eu tinha visto que faltou o body html estar com height!
agora funcionou perfeito.. consegui ate concertar o outro la..
Obrigado
não encomodo mais =D
Use min-height 100%, em vez de travar em height: 100%;