Comment avoir des boutons de la hauteur de remplissage de l'espace vertical d'un site web?
J'ai un site web mobile et il dispose de 3 boutons et d'un couple de lignes de texte. J'ai le texte centré (à l'horizontale), et les boutons de prendre toute la largeur de l'écran. Cependant, j'ai besoin de la hauteur des boutons à l'échelle de prendre la totalité de l'écran. Comment puis-je rendre les boutons échelle verticale?
<p>PROCRASTINATION TIMER v2.0.0</p>
<span id="current">Currently WAITING</span><br/>
<span>Time to Work: </span><span id="work">Not set.</span><br/>
<span>Time to Derp: </span><span id="derp">Not set.</span><br/>
<button onclick="get_workderp_times();" id="startbutton" style="width:100%;height:33%;">Start</button><br/>
<button onclick="switchstatus('Derp');" id="derpbutton" style="width:100%;height:33%;">Derp</button><br/>
<button onclick="switchstatus('Work');" id="workbutton" style="width:100%;height:33%;">Work</button><br/>
<p>Created by Snake Squared Industries</p>
C'est en chrome avec la hauteur réglée à 33%:
style="width:100%;height:33%;"
C'est en chrome sans hauteur définie:
style="width:100%;"
C'est en chrome avec hauteur de 100%:
style="width:100%;height:100%;"
(En passant, j'ai vérifié, les résultats sont les mêmes dans IE trop...)
- R u à l'aide de Jquery Mobile Site??? Peut-u s'il vous plaît poster le code HTML
- Je ne suis pas à l'aide de jQuery.
Vous devez vous connecter pour publier un commentaire.
Voici la bonne façon de configuration de cette place... pour plus de clarté, j'ai déplacé votre attributs de style en CSS.
Afin d'obtenir les éléments d'étendre verticalement, nous devons les mettre dans un récipient, et la force que le conteneur à 100%. Voici le CSS que j'ai utilisé...
CSS
Et voici le HTML modifié:
HTML
J'ai également créé un JSFiddle pour vous montrer les résultats.
DÉMO
http://jsfiddle.net/bX8EU/1/
Vous pouvez définir la fonction de chaque bouton pour avoir une hauteur de 33%, ce qui sera mise à l'échelle en fonction de l'appareil... ou de 30% chacun et ont une certaine marge d'entre eux
En fait, vous devez modifier les propriétés de hauteur de la base des éléments. L'ajout de
style="height:100%"
à la<html>
,<body>
, et une div contenant fixé.fera de la hauteur du bouton être la même que la hauteur de l'écran même si l'écran est redimensionné
Simple:
Serait certainement faire l'affaire.
Aussi essayer
de l'aligner dans le centre de votre appareil mobile.