Largeur 50% avec hauteur 100%, comment faire ?

Largeur 50% avec hauteur 100%, comment faire ? - HTML/CSS - Programmation

Marsh Posté le 14-07-2015 à 16:49:14    

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). Dans celle de gauche j'ai un background qui doit la couvrir en totalité.
 
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

Reply

Marsh Posté le 14-07-2015 à 16:49:14   

Reply

Marsh Posté le 14-07-2015 à 16:54:13    

Reply

Marsh Posté le 14-07-2015 à 21:29:13    


Ouais j'avais appliqué un min width, (enfin un min height dans mon cas) mais si je fais ça au final je dois mettre un min height propre à chaque résolution, sinon en résolution smartphone, mon image est bien trop haute.

Reply

Marsh Posté le 14-07-2015 à 22:37:18    

pourtant je vois que tu peux mettre un % comme paramètre

Reply

Marsh Posté le 14-07-2015 à 23:16:51    

Oui mais même avec un min-height:100% ça ne change rien à ma fenêtre, ça a le même effet qu'un height:100%

Reply

Marsh Posté le 15-07-2015 à 08:29:14    

Code :
  1. .html, body {
  2.  margin: 0;
  3. }
  4. #container {
  5.  width: 100%;
  6.  height: 100%;
  7.  margin: 0 auto;
  8. }
  9. #left {
  10.  float: left;
  11.  width: 50%;
  12.  min-height: 100%;
  13.  background-image: url('image1.jpg');
  14.  background-repeat: no-repeat;
  15.  background-color: blue;
  16. }
  17. #right {
  18.  overflow: hidden;
  19.  width: 50%;
  20.  min-height: 100%;
  21.  background-color: red; 
  22. }
  23. <div id="container">
  24.  <div id="left">&nbsp;</div>
  25.  <div id="right">&nbsp;</div>
  26. </div>


 
Sous chrome en tout cas ca donne ce que tu attends si j'ai bien compris.

Reply

Marsh Posté le 15-07-2015 à 10:35:30    

Il me semble qu'il faut aussi mettre une min-height:100% sur les balises html et body...


---------------
D3
Reply

Marsh Posté le 15-07-2015 à 11:59:17    

mechkurt a écrit :

Il me semble qu'il faut aussi mettre une min-height:100% sur les balises html et body...


 
Arf oui je pense que tu à trouver ce qui bloquait ^^
 
C'est de la programmation responsive comme Bootstrap ^^ Si tu fait une col-lg-12 dans une col-lg-6 tu prend toutes la place dans la col-lg-6 mais tu ne déborde pas.
 
Donc je pense que c'est pareil, la toute première div body si elle n'est pas en 100% elle même comment y intégrer ce qu'il faut, test voir.

Reply

Marsh Posté le 15-07-2015 à 17:36:03    

Perso ça ne fonctionne pas, que j'utilise mon code (ci-dessous) ou celui posté plus haut, ça me donne ça http://i.imgur.com/B1nFinE.jpg (la seule dif avec votre code c'est qu'il n'y a pas de marge). Que ce soit sous chrome ou firefox, ça ne prend pas toute la hauteur.
 

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


Message édité par Zangalou le 15-07-2015 à 17:41:53
Reply

Marsh Posté le 15-07-2015 à 17:47:11    

Reply

Marsh Posté le 15-07-2015 à 17:47:11   

Reply

Marsh Posté le 15-07-2015 à 18:09:50    

oui bon :o j'avais manqué le body et html 100% :D ça fonctionne


Message édité par Zangalou le 15-07-2015 à 18:10:38
Reply

Marsh Posté le 15-07-2015 à 19:32:25    

Il n'y en a pas spécialement besoin, mais c'est surtout qu'entre ton code avec les style inline et celui proposé il y a quand même de grosses diff de style ;)

Reply

Marsh Posté le 15-07-2015 à 19:36:51    

C'est juste un essai de page rien de plus, j'ai (surement) la mauvaise habitude de toujours débuter en brut avant de disposer ça correctement et de lier ma page à un style.css.


Message édité par Zangalou le 15-07-2015 à 19:37:03
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed