Largeur 50% avec hauteur 100%, comment faire ?

**StephaneCa** · 14/07/2015, 21h38

Bonjour,

Voilà mon problème, j'ai deux div qui prennent chacune 50% en largeur de la page, quelque soit la résolution (du moins pour les grosses réso, ensuite je les positionnerai autrement). Dans celle de gauche j'ai une image en background qui doit la couvrir en totalité, mais surtout qui doit prendre 50% de la largeur de la page et 100% de sa hauteur.

Problème, même si ma div s'ajuste parfaitement en largeur (notamment grâce au texte inséré dans la div), impossible de la forcer à prendre toute la hauteur de la page. Existe-t-il une solution pour forcer une div à prendre la moitié de la largeur et la hauteur totale (donc une espèce de width:50%; height:100%

, avec une image de background, sans forcément y insérer quelque chose ? Je sais qu'avec une image classique, non positionnée en background, le problème serait réglé, mais c'est pas ce que je veux.

Merci

Invité · 14/07/2015, 23h02

Bonjour,
ce serait bien que tu donnes le code (HTML + CSS), non ?

Autant pour la largeur (width), c'est facile en % (basé sur le width de la fenêtre), autant pour la hauteur... c'est plus compliqué !

Pour la hauteur, il faut que tous les "parents" aient une hauteur définie pour qu'un height en % fonctionne...
La question étant : "xx% de quoi ?" (quel référant ?)
(à moins de compter sur le JavaScript/jQuery pour régler ça...)

voir aussi :

FAQ CSS

**StephaneCa** · 14/07/2015, 23h20

Pour l'heure c'est uniquement une tentative de page qui, si elle est satisfaisante, sera utilisée à plusieurs endroits, le css n'est donc pas en place. J'ai tout mis en vrac pour le moment (sauf pour les balises de textes).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<body>
 
<div style="width:100%; max-width:1920px; margin:auto;">
<div style="width:50%; min-height:100%; float:left; background-image:url(iwatabg.png); background-size: cover;  background-repeat: no-repeat; text-align:center;">
<h1 class="pagename" style="text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);">Titre</h1>
<p class="txtfichesint">texte</p>
</div>
<div style="width:50%; float:left;">dddd</div>
</div>
</body>

Le résultat donne ça sur ma résolution
http://i.imgur.com/B1nFinE.jpg

Sachant que moi, j'aimerais que quelque soit le texte dans la div de gauche, celle-ci soit automatiquement de 50% de la page de large (aucun problème pour le moment), mais surtout 100% de haut, et la comme vous voyez sur l'image, c'est pas le cas.

Largeur 50% avec hauteur 100%, comment faire ?

Dimensionnement en CSS

Discussions similaires

Partager

Partager