hauteur mère CSS en pourcentage pour les enfants placés absolus dans Responsive Web Design

Question

I'am travaille actuellement sur une conception adaptée et je suis tout à fait coincé:

J'ai besoin de définir la position des enfants de type d'image absolue dans leur div parent, et gardez la section inférieure sous ce parent. Mais en fait, la seule solution que j'ai est de définir une hauteur fixe pour ce parent (dans ce cas, une marge relative pour la section inférieure ne fonctionnerait pas dans une structure dynamique). Le problème est que les images, mis à max-width: 100%; de garder leurs dimensions flexibles, développez avec la page, et la partie inférieure est plus bien positionné sur Redimensionner:

<div id='page'> 
<div id='b0'><img /><img /></div> 
<section id='s0'><h2>section title</h2><p>hjkhjkhjk</p></section> 
</div> 

Et le CSS:

#page{max-width:1024px; margin: 0 auto;} 
#b0{position: relative; height:25%;}/* doesn't work, 100px instead work but responsive design fails */ 
#b0 img{position: absolute;} 

Quelqu'un at-il une solution pour cela?

Merci de J'ai maintenant à l'avance

Answer 1

Ok, une solution mixte très simple en utilisant les deux CSS et Javascript: Comme le premier besoin est la conception « mobile d'abord », je l'ai introduit un min-hauteur pour les images récipient dans un fichier css de requête média smartphoine ciblée:

dans la balise de tête:

<link rel='stylesheet' media='screen and (min-width:320px)' type='text/css' href='css/css.css' /> 

Puis le CSS:

#b0{position: relative; min-height:82px;} 

Et un peu de Javascript:

$(document).ready(function(){window.onresize=function(){$('#b0').css({'height' :(this.innerWidth * .25)+'px'})}}); 

Donc, cette solution mixte a besoin Javascript activé, un min-height à mettre en place pour chaque étape de recherche des médias, et un pourcentage de la hauteur du conteneur calculée avec globale et dimensions maximales de la page: dans mon cas:

#page{max-width: 1024px;} 

et une hauteur de conteneur d'environ 280px;

Espérons que cela peut aider quelqu'un ;-) jour

Answer 2

solution plus simple:

consiste à mettre chaque image à la position: absolute; sauf le dernier:

#b0 img:last-child{position: relative; 

en gardant un élément dans le "flood" fournit à son parent la valeur de hauteur nécessaire.