Comment puis-je obtenir ce qui suit en HTML?

Je souhaite avoir une page qui a une hauteur fixe (sans barres de défilement). Puis, sous l'en-tête, une div de hauteur de fluide qui a une barre de défilement (pas toute la page). De plus, la largeur doit être fluide sur toute la page.Comment puis-je obtenir ce qui suit en HTML?

Ceci est illustré ci-dessous: Image of layout involving fixed-height header followed by scrolling area http://img709.imageshack.us/img709/9242/tmphh.png

Que dois-je faire en HTML pour que cela fonctionne dans tous les navigateurs, y compris IE6?

EDIT: CODE CHANGÉ, fonctionne dans IE6, Firefix, Chrome, Cependant, IE6 montre 4 barres de défilement !!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
    HTML,BODY 
    { 
     height:100%; 
    } 
    .fullContainer 
    { 
     width:80%; 
     height:40%; 
     overflow:auto; 
     position:relative; 
    } 

    /*-- Can only modify these --*/ 
    .header 
    { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 

     height:40px; 
     background-color:#eeeeee; 
    } 
    .content 
    { 
     position: absolute; 
     top: 40px; 
     left: 0; 
     right: 0; 
     bottom: 0; 

     overflow:auto; 
    } 
    .contentContainer 
    { 
     height:100%; 
    } 
    * html .fullContainer{ /*IE6 hack*/ 
     padding: 40px 0 0 0; 
    } 
    * html .content{ /*IE6 hack*/ 
     height: 100%; 
     width: 100%; 
    } 
    /*-- Can only modify these --*/ 
</style> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 
<body> 
<div>before content...</div> 
<div class="fullContainer"> 
    <div class="header">Header</div> 
    <!-- <div class="contentContainer"> --> 
     <div class="content"> 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content. 
      <div style="width:1000px;background-color:#ccffcc;">long text</div> 
     </div> 
    <!-- </div> --> 
</div> 
<div>after content...</div> 

</body> 
</html>

Source

2010-03-12 Salvin Francis

sonne comme une question pour http://Doctype.com/ – random

de Nice diagramme! +1 – Keltex

@Salvin juste au cas où votre curieux, votre question est discutée à http://meta.stackexchange.com/questions/41972/questions-illustrated – Earlz

Puisque vous voulez le défilement interne sur la div fond, je suppose que vous voulez que le div fond pour être fluide verticalement (plutôt - fluide à la taille de la fenêtre du navigateur, pas au contenu) ainsi que horizontalement. (Être fluide horizontalement n'a vraiment pas grand chose à voir avec une solution à un décalage vertical.) Et puisque c'est le cas, votre en-tête doit être une hauteur fixe. Si le div inférieur n'a pas besoin d'être fluide verticalement, vous pouvez simplement définir height au nombre désiré et déclarer overflow-y:scroll. Pour la fluidité verticale, vous devez utiliser conflicting absolute positions, en réglant le div inférieur pour commencer juste en dessous de l'endroit où la div supérieure se termine et en descendant vers le bas de la page. Pour l'essentiel:

#bottomDiv { 
    position: absolute;  
    top: 100px; /* however tall your top div is */ 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

Notez l'expression que vous devrez utiliser pour IE6 (énoncées dans l'article lié à, au-dessus).

Mise à jour Pourquoi ne pouvez-vous pas modifier .fullContainer? Si c'est juste que c'est dans une autre feuille de style, essayez quand même. Le fonctionnement de CSS, vous pouvez remplacer tout ce qui précède. Donc, si dans votre zone modifiable vous pouvez ajouter une règle fullContainer (ce qui devrait être possible si vous modifiez le fichier CSS), vous pourriez très probablement redéfinir cette div pour supprimer les déclarations de largeur et de hauteur (width:auto et height:auto devrait faire) et de même réinitialiser ou remplacer d'autres choses (par exemple, overflow:hidden si nécessaire).

L'autre option est de faire en sorte que vos divs (nouveaux) haut et bas désirent utiliser position:fixed, mais notez que les positions fixes sont notoirement boguées sur certains navigateurs, et vous pourriez vouloir l'éviter aussi fragile pour la mise en page site entier.

Mise à jour 2 Pour IE6, vous utilisez 100% de hauteur plus un remplissage, ce qui signifie qu'il sera automatiquement trop grand. Dans le article I point to, recherchez 'Création de l'exception pour IE5 et IE6' et utilisez ces expressions - si vous ne pouvez pas les placer dans des feuilles de style séparées, utilisez simplement le hack d'étoiles que vous utilisez déjà.

Source

2010-03-12 04:50:33

qu'en est-il de Fluid par conteneur et non de la fenêtre entière du navigateur? vérifiez mon code ci-dessous .... –

dude! J'ai aussi supposé que 2 des 4 bords seraient ignorés .. c'est fou cool. – mpen

Ouais, c'était un mindwarp quand je l'ai lu pour la première fois. Yay pour A List Apart. –

Un moyen facile de simuler est de donner le composant d'en-tête l'attribut suivant:

div.header {position: fixed;}

Et donner au-dessus div une hauteur fixe, tout en faisant pas pour la div fond.

Source

2010-03-12 04:51:50 Tom

Downvote? Vraiment? – Tom

L'ajout de la position: fixed le sortira du flot, et ne donnera pas les div scrollbars individuels du div. –

Comment exactement cela prend-il quelque chose hors du flux? L'en-tête flottera au-dessus du contenu inférieur, et il n'y a aucun besoin de barres de défilement supplémentaires sur le div inférieur. – Tom

Est-ce que c'est le cas?

HTML

<body> 
    <div id="header"> 

    </div> 

    <div id="wrapper"> 

    </div> 
</body>

CSS:

*{padding:0;margin:0} 
    body{overflow:hidden} 
    #header,#wrapper{width:100%} 
    #header{position:fixed;top:0;left:0;height:100px;background-color:#F00} 
    #wrapper{position:fixed;height:100%;margin-top:100px;overflow:scroll}

Source

2010-03-12 05:22:03 Simon

Je pense que cela devrait faire l'affaire

<body style="margin:0;width:100%; height:100%; overflow:hidden;"> 
    <div id="HeaderDiv" style="width:100%; height:100px; overflow:hidden; float:left;"> 
    </div> 
    <div id="FluidDiv" style="width:100%; height:100%; overflow:scroll; float:left;"> 
    </div>  
</body>

Source

2010-03-12 05:31:03 ZX12R

Minor nitpick: Votre marge dans la balise de corps pourrait simplement être écrit "marge: 0 ". Beaucoup plus simple et plus facile à lire. –

oh ... ouais merci. – ZX12R

vérifier le code source ... –

Comment puis-je obtenir ce qui suit en HTML?

Répondre

Questions connexes