100% div hauteur

Hie tout le monde100% div hauteur

Je suis en train de concevoir une page web avec une disposition fluide. Je veux garder une largeur de 100% et une hauteur de 100%. Le problème est que je ne sais pas comment garder les divs "left" et "right" avec une hauteur de 100% à l'intérieur de leur div parent, "wrapper".

<div id="container" style="width:100%; height:100%"> 
    <div id="header" style="width:100%; height:100px"> 
    </div> 

    <div id="wrapper" style="width:100%; height:(100% - 100px)"> 
      <div id="left" style="width:250px; height:(100% - 100px)"> 
      </div> 

      <div id="right" style="width:(100% - 250px); height:(100% - 100px)"> 
      </div>   
    </div>   
</div>

Aidez-nous s'il vous plaît.

Réponse de doctype.com

CSS

html, body{ 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

HTML

<body> 
<div id="container" style="width:100%; height:100%; position: absolute;"> 
    <div id="header" style="width:100%; height:100px;"> 
header 
    </div> 
    <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;"> 
    <div id="left" style="width:250px; height:100%; float:left;"> 
    left 
    </div> 
    <div id="right" style="width: 250px; height:100%; float:right; "> 
    right 
    </div>   
    main content 
    </div>   
</div> 
</body>

Source

2010-01-25 Q_Mlilo

Vous pourriez avoir une meilleure chance de réponse si vous avez demandé dans le site d'affiliation doctype.com – Spoike

Si je comprends bien, vous voulez flotter divs droite et à gauche dans votre div wrapper, mais en conservant toute la hauteur de l'emballage div dans l'écran?

Si c'est le cas, les div droite et gauche vont bien sûr à l'intérieur du wrapper, et vous utilisez {... float: left; position: relative;} et {... float: droite; position: relative;} pour les faire flotter sur les côtés. Maintenant, parce que vous avez flotté ces deux divs qui font partie du contenu de votre div wrapper, l'enveloppe elle-même peut avoir une hauteur nulle. C'est parce que les deux divs à l'intérieur "en sortent".Pour donner votre enveloppe la même hauteur que les deux divs ont à l'intérieur, vous pouvez:

mettre cela comme un troisième div dans votre emballage: <div style="clear: both;"></div> OU
mettre un élément dans votre emballage après que les deux divs (comme un span) et lui donner une propriété CSS de {... clear: les deux;}

Maintenant vous avez "effacé les flottants" et votre emballage a la hauteur totale des deux div à l'intérieur. SI D'AUTRE PART, vous voulez que tout votre contenu s'étire sur toute la hauteur de l'écran, sans tenir compte de ce que vous y mettez, vous devrez faire de la magie CSS et cela deviendra trop compliqué expliquer sans voir votre code. Commencez ici: http://ryanfait.com/sticky-footer/

Espérons que cela aide.

Source

2010-01-25 09:29:44 Tom

merci pour le lien, très utile! – Lucius

@Lucius: vous êtes les bienvenus ... utilisé depuis longtemps, jamais eu de problèmes. – Tom

essayer d'ajouter

min-height: 100%; à votre css, tapez this exemple

Source

2010-01-25 08:23:01 ant

'min-height' n'est pas bien pris en charge par tous les navigateurs – poke

Eh bien je lui ai donné l'exemple .. il peut voir tout ce qu'il faut accomplir son but, il provoque la hauteur à la place .. il obtiendra les mêmes résultats – ant

@poke: IE6 est toujours supposé être pertinent sauf indication contraire? – Anonymous

Pour avoir une div avec 100% de la hauteur du navigateur, le parent doit également avoir une hauteur de 100%. Essayez d'ajouter les éléments essentiels suivants:

html, body { height: 100%; margin: 0; padding: 0; }

Source

2010-01-25 08:23:41 poke

J'ai déjà ce code. mon div principal ("container") est ok, il a 100% de hauteur. Mon en-tête a une hauteur de 100px - Je veux div "wrapper" et ses enfants ("left" et "right") pour tenir dans la vue d'écran restante. –

Si vous faites tous les éléments du même niveau de 100% largeur et la hauteur, vous aurez un comportement inattendu entre les navigateurs. Avec l'exemple que vous avez donné, vous essayez de donner header et wrapper tout l'espace dans le parent.

100% container 
+----------------------------+ 
| 100% header 100% wrapper | 
| +----------+ +-----------+ | 
| |   errr...?  | | 
| +----------+ +-----------+ | 
+----------------------------+

Comment cela est-il vraiment possible? Il y a plusieurs façons de le faire: soit

le premier élément obtient tout l'espace ou,
les deux doivent se chevaucher ou,
ils partagent l'espace

Vous avez donc besoin être plus précis quand on donne des pourcentages. En passant, avez-vous essayé float?

position: relative; // or absolute 
float: left;

Source

2010-01-25 08:28:36 Spoike

J'ai modifié pour donner un peu de logique à ce que je veux réaliser. –

100% div hauteur

Répondre

Questions connexes