Tamanho da tela(pagina) q se adapta

[kaayasinho 0]

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é

 

Deitado que é o com problema

 

 

Em Pé denovo mostrando a proxima pagina

 

 

Espero que possam me ajudar nao consigo rresolver eesse erro

abraço

[William Bruno 1501]

Use min-height 100%, em vez de travar em height: 100%;

[kaayasinho 0]

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

[rikaschmitt 54]

min-height:100vh ? :P

[William Bruno 1501]

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%; }

[kaayasinho 0]

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?

[kaayasinho 0]

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

 

http://www.theoneeventos.com.br/teste

[rikaschmitt 54]

Essa unidade "vh" é lida em todos os navegadores e dispositivos?

[William Bruno 1501]

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".

[kaayasinho 0]

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

[William Bruno 1501]

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.

[kaayasinho 0]

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

[William Bruno 1501]

com o min-height: 100% funciona.

[kaayasinho 0]

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"></script>[/url]
 
 
<style>
*{
margin:0; 
}
body{
height:100%;
min-height:100%;
background:#CCC;
}
header{
width:100%;
height:30px;
background:#F00;
color:#fff;
position:fixed;
opacity:0.5;
}
section{
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

[William Bruno 1501]

<!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..

[kaayasinho 0]

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