HTML5 / CSS3: 100% de la hauteur de la mise en page pour mobile avec deux divs que des boutons et aucun débordement
Je veux réaliser certains mobiles de la mise en page avec deux divs ou des boutons de remplir la page entière de 50% à 50% (EDIT: unes au-dessous des autres).
Maintenant, quand je fais avec ce code
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
section {
height: 50%;
}
section>div {
height: 100%;
border: 1px solid black;
margin: 10px;
}
<section>
<div>text1</div>
</section>
<section>
<div>text2</div>
</section>
la page est trop élevé.. pas étonnant que la marge de 10px et la 1px frontière agrandir la div... Également d'une enveloppe de div avec un padding de 10px ne résoudra pas le problème.
Comment pourrais-je réaliser cette mise en page lorsque la page n'est pas du défilement (pas de débordement) mais 100% de hauteur, avec deux boutons de remplir la page entière (chacun à 50% ou 70% - 30%), tandis que le bouton lui-même a une marge ou de rembourrage pour obtenir un petit espace à la bordure de page et un ex: 1px solid border?
Je vous remercie à l'avance
^x3ro
OriginalL'auteur x3ro | 2012-02-02
Vous devez vous connecter pour publier un commentaire.
Pour le rendre encore plus simple, ne pourriez-vous utiliser les CSS box-sizing, ce qui devrait être pris en charge dans la plupart des navigateurs mobiles...(j'ai inclus fournisseur de préfixes pour l'exemple).
Voir l'exemple ici
La boîte de dimensionnement de la propriété assure que la hauteur et la largeur d'un élément ne sont pas affectés par des frontières, rembourrage, ou de marges.
OriginalL'auteur Darek Rossman
Je voudrais lire cet article sur le design pour les appareils mobiles si c'est ce que vous êtes en train de concevoir pour (il y a plus de liens au bas de la page, vous devriez suivre).
Et pour votre mise en page, voulez-vous dire quelque chose comme ceci? Je vous conseille d'utiliser le positionnement absolu lors de la conception de ce genre. Il rend tout beaucoup plus facile et il n'a pas besoin de la disposition de flux de toute façon.
Vous ne précisez pas dans votre question, la direction, les boutons doivent être empilés. L'action appropriée serait de m'avertir de l'erreur afin que je puisse modifier ma réponse (comme je l'ai fait) et le marquer comme étant correcte.
Je suis désolé pour cela. Je suis nouveau ici... Pourriez-vous expliquer comment vous informer? 🙂
Si vous avez des commentaires sur la réponse, l'auteur de cette réponse sera notifié. Je suis aussi assez sûr que les gens sont informés si vous tapez @<username>, par exemple @x3ro: Bonjour!
Ok, merci. Je vais garder cela à l'esprit 😉
OriginalL'auteur Hubro
C'est la solution que j'ai été à la recherche pour: http://jsfiddle.net/WWcfm/10/
Grâce à Codemonkey code de l'exemple, en plaçant deux cases à droite à côté de l'autre, j'ai compris comment les définir underneeth les uns des autres.
Merci!
#EDIT: Attention!
Vous aurez besoin d'utiliser normaliser.css. Sinon, il serait de regarder de façon différente sur votre site!
OriginalL'auteur x3ro