Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1476 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Largeur 50% avec hauteur 100%, comment faire ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Largeur 50% avec hauteur 100%, comment faire ?

n°2262430
Zangalou
Posté le 14-07-2015 à 16:49:14  profilanswer
 

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

mood
Publicité
Posté le 14-07-2015 à 16:49:14  profilanswer
 

n°2262431
runa
Posté le 14-07-2015 à 16:54:13  profilanswer
 
n°2262438
Zangalou
Posté le 14-07-2015 à 21:29:13  profilanswer
 


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.

n°2262450
runa
Posté le 14-07-2015 à 22:37:18  profilanswer
 

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

n°2262453
Zangalou
Posté le 14-07-2015 à 23:16:51  profilanswer
 

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%

n°2262462
VisualC++
J'va y penser ...
Posté le 15-07-2015 à 08:29:14  profilanswer
 

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.

n°2262467
mechkurt
Posté le 15-07-2015 à 10:35:30  profilanswer
 

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


---------------
D3
n°2262475
runa
Posté le 15-07-2015 à 11:59:17  profilanswer
 

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.

n°2262493
Zangalou
Posté le 15-07-2015 à 17:36:03  profilanswer
 

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
n°2262494
mechkurt
Posté le 15-07-2015 à 17:47:11  profilanswer
 
mood
Publicité
Posté le 15-07-2015 à 17:47:11  profilanswer
 

n°2262496
Zangalou
Posté le 15-07-2015 à 18:09:50  profilanswer
 

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
n°2262506
VisualC++
J'va y penser ...
Posté le 15-07-2015 à 19:32:25  profilanswer
 

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 ;)

n°2262508
Zangalou
Posté le 15-07-2015 à 19:36:51  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Largeur 50% avec hauteur 100%, comment faire ?

 

Sujets relatifs
Site à double colonne avec une à largeur fixe et une autre ajustableLargeur de page en XML
Adapter la hauteur d'une iframe à son contenu qui comporte des liensQuelle base pour 100 millions de lignes par jour
Regler la hauteur de la page selon le contenuProgrammer impression en bloc de la page 7 de 100 fichiers HTM offline
100% UCpositionnement float n'agrandit pas la hauteur
Hauteur de div (100%) 
Plus de sujets relatifs à : Largeur 50% avec hauteur 100%, comment faire ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR