CSS 100% hauteur + en-tête avec hauteur statique;

Je construis une mise en page qui comprend un en-tête de 40 px de hauteur. Sous cet en-tête se trouve un fichier SWF qui devrait occuper le reste de l'espace disponible. La meilleure solution jusqu'à maintenant a été de travailler avec une table, donnant à la première rangée 40px de hauteur et la deuxième rangée une hauteur de 100% - mais ces lignes s'additionnent toujours dans Internet Explorer, ce qui donne une barre de défilement de 40 pixels supplémentaires - ce qui ne devrait pas être le cas.CSS 100% hauteur + en-tête avec hauteur statique;

J'ai essayé d'utiliser ceci: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ - cela fonctionne très bien si vous avez du contenu qui pousse à la baisse mais avec un SWF à 100%, il va prendre toute la page, ou la moitié de la page (selon le SWF dans le contenu div ou le SWF étant le contenu div).

Avant que j'utilise javascript pour prendre soin de cette entreprise, je me demande si quelqu'un d'autre sait une meilleure solution?

Source

2009-04-27 Kasper

Essayez de définir votre en-tête comme étant statique. Il flotte ainsi sur le corps principal et règle le corps principal à 100% de la hauteur. Ensuite, donnez au corps un rembourrage de 40px sur le dessus.

Source

2009-04-27 19:14:12

qui fonctionne sorta, a dû ajouter wmode = « transparent » à mon swfobject pour continuer à montrer l'en-tête, mais maintenant mon SWF reste collé tout en haut de la page si les positions d'en-tête et de swf sont définies sur absolu. Lorsque réglé sur relatif le même vieux se produit. – Kasper

Cela aurait fonctionné avec une page normale - mais pas avec l'installation avec le SWF, j'ai eu recours à javascript. Merci quand même – Kasper

Une solution similaire à forcer un pied de page au bas d'une page peut travailler

html, body{height:100%;margin:0;padding:0;} 
    #head{height:40px;background:blue;} 
    #wrapper{min-height: 100%;height: auto !important;height: 100%; margin: 0 auto -40px;background:red;} 
    #content{} 

<div id="wrapper"> 
<div id="head"> 
</div> 
<div id="content"> 
</div> 
</div>

Source

2009-04-27 19:45:27 wheresrhys

CSS 100% hauteur + en-tête avec hauteur statique;

Répondre

Questions connexes