web-dev-qa-db-fra.com

Définition de la hauteur des éléments dans une mise en page réactive?

Généralement, quel balisage et CSS créeront un élément avec une hauteur basée sur un pourcentage dans une conception réactive? Comment construire une disposition à 2 colonnes (fixe - fluide) avec Twitter Bootstrap? montre comment créer deux colonnes à 100% de hauteur, mais cela casse pour des hauteurs <100%.

Plus précisément, j'ai un div de barre latérale avec une liste d'éléments, qui peut être court (vide) ou long (overflow: auto). Mais comme aucun élément parent n'a une hauteur fixe, height: 20%; ne marche pas. Comment puis-je donner à la barre latérale une hauteur fluide tout en conservant un design réactif?

csshtml5responsive-design
33
knite

Habituellement, avoir un fond de rembourrage fluide sur le conteneur parent résout ce problème.

Plus d'informations peuvent être trouvées ici: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

mise à jour: sur js bin http://jsbin.com/obesuk/1/

balisage:

<div class="obj-wrapper">
 <div class="content">content</div>
</div>

css:

  .obj-wrapper {
    position:relative;
    width:50%;
    padding-bottom:40%;
    height:0;
    overflow:hidden;
  }
  .content {
    position:absolute;
    width:100%;
    height:100%;
    background:red;
  }
46
Varinder