web-dev-qa-db-fra.com

comment puis-je donner une div une hauteur sensible

J'affirme apprendre le design réactif, mais il y a une chose que je n'arrive pas à comprendre, jusqu'à présent ...

Voici un exemple de travail: http://ericbrockmanwebsites.com/dev1/

J'aimerais que l'élément div (contactBg) avec le texte à l'intérieur descende au bas de l'image à gauche. Évidemment, je peux le faire en définissant la hauteur en px, mais cette hauteur est maintenue lorsque le reste de la fenêtre est redimensionné au lieu d’être fluide.

Si vous connaissez des articles de qualité qui expliquent comment faire cela, ce serait très utile, merci!

Voici le balisage:

<div class="row-fluid">
        <div class="span10 offset1">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span5">
                        <img src="images/logo.jpg" alt="logo" />
                        <img src="images/store.jpg" alt="store" />
                    </div><!-- /span5 -->
                    <div class="span7">
                        <img src="images/portal.jpg" alt="portal">
                        <div class="contactBg">
                            Administration: Emma Jane Julien<br />
                            <a href="mailto:[email protected]">[email protected]</a>
                        </div><!-- /contactBg -->
                    </div><!-- /span7 -->
                </div><!-- /row-fluid -->
            </div><!-- /container-fluid -->
        </div><!-- /span10 offset1 -->
    </div> <!-- /row-fluid -->

Et voici le css:

   body {
        background: url(../images/3D2A1698A177AF9B71_218.png) repeat;
    }

    img {
        max-width:100%;
        padding-bottom:1%;
    }

     .container-fluid {
        background:#fff;
        padding: 1%;
    }

      .row-fluid {
        width: 100%;
        *zoom: 1;
 }
      .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 30px;
        margin-left: 1%;
        *margin-left: 2.709239449864817%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}

      .row-fluid .span10 {
        width: 82.87292817679558%;
        *width: 82.81973668743387%;
      }

      .row-fluid .span7 {
        width: 58.06353591160195%;
        *width: 57.12912895262725%;
      }

      .row-fluid .span5 {
        width: 40.93646408839753%;
        *width: 40.00205712942283%;
      }
      .row-fluid .span4 {
        width: 31.491712707182323%;
        *width: 31.43852121782062%;
      }

    .contactBg {
        background: #282624;
        padding: 3%;
        max-width:100%;
        height:auto;
    }
htmlcssresponsive-design
5
Eric Brockman

Je sais que c'est un peu tard pour la fête mais vous pouvez utiliser des unités de viewport

De caniuse.com:

Unités de fenêtre: vw, vh, vmin, vmax - CR Unités de longueur représentant 1% de la taille de la fenêtre pour la largeur de la fenêtre (vw), la hauteur (vh), la plus petite des deux (vmin) ou la plus grande des deux (vmax ).

Support: http://caniuse.com/#feat=viewport-units

div {
/* 25% of viewport */
  height: 25vh;
  width: 15rem;
  background-color: #222;
  color: #eee;
  font-family: monospace;
  padding: 2rem;
}
<div>responsive height</div>
11
naeluh

Pour que la hauteur d’une div soit sensible, elle doit se trouver à l’intérieur d’un élément parent avec une hauteur définie pour en déduire sa hauteur relative.

Si vous définissez la hauteur du conteneur contenant l'image et la zone de texte à droite, vous pouvez définir ultérieurement les hauteurs de ses deux enfants entre 75% et 25%.

Cependant, cela deviendra un peu délicat lorsque la mise en page du site se rétrécira et que les choses deviendront vaines. Essayez de régler le rembourrage sur .contentBg à quelque chose comme 5,5%.

Ma suggestion est d'utiliser des requêtes multimédia pour ajuster le remplissage à différentes tailles d'écran, puis de tout placer dans une seule colonne, le cas échéant.

6
Lazaro Gamio

Je pense que vw est la meilleure option. Il ajuste automatiquement la hauteur en fonction de la résolution de l'écran. Par exemple: - height: 10vw; La hauteur deviendra sensible sur tous les écrans.

0
JAGJIT DHALIWAL

Je ne pense pas que ce soit la meilleure solution, mais cela semble fonctionner. Au lieu d'utiliser la couleur d'arrière-plan, je vais simplement incorporer une image de l'arrière-plan, la positionner relativement, puis envelopper le texte dans un élément enfant et le positionner en absolu, au centre.

0
Eric Brockman