mise en page css: une hauteur de 100% div (plus divs l'intérieur ainsi) avec deux hauteur fixe divws

Voici le code HTML:mise en page css: une hauteur de 100% div (plus divs l'intérieur ainsi) avec deux hauteur fixe divws

<div id="header"> 
    </div> 
    <div id="container"> 
     <div id="leftbar"> 
     </div> 
     <div id="content"> 
     </div> 
    </div> 
    <div id="footer"> 
    </div>

Et voici ce que je veux atteindre, même si ce n'est pas valide CSS, mais je pense que vous comprendrez mon point:

html,body 
    { 
    min-width:800px; 
    max-width:1680px; 
    width:100%; 
    height:100% 
    } 
    #header 
    { 
    width:100%; 
    height:100px; 
    background:#CCCCCC url(images/header_bg.gif) repeat-x; 
    } 
    #footer 
    { 
    width:100%; 
    height:10px; 
    } 
    #container 
    { 
    width:100%; 
    height:100%-100px-10px; /* I want #container to take all the screen height left */ 
    } 
    #leftbar /*fixed width, the height is always the same as the screen height*/ 
    { 
    height:100%; 
    width:200px; 
    } 
    #content 
    { 
    height:100%; 
    width:100%-200px; /* take all the screen width left except the leftbar */ 
    overflow:auto; 
    }

Quelqu'un vient de mettre cela comme un exemple: http://limpid.nl/lab/css/fixed/header-and-footer

Je ne pense pas à l'aide <body>padding à exclure l'en-tête et le pied de page est un bon moyen d'y aller, parce que je voudrais que toutes les barres de défilement apparaissent à l'intérieur du contenu div #, pas pour l'ensemble <body> tag.

Source

2009-12-17 WilliamLou

La largeur normale d'un élément de bloc est de 100%. Il vous suffit donc d'ajouter une marge appropriée. Si je comprends bien votre question.

Source

2009-12-17 21:07:05

Pourriez-vous être plus précis? Donner un 'marge-left: 200px' au contenu div #? Dans ce cas, quelle est la largeur du contenu de div #, si c'est 100% par défaut, il n'y a aucun moyen de mettre côte à côte ces deux divs. – WilliamLou

Avez-vous envisagé d'utiliser la position: fixe pour les éléments de charpente? Ou êtes-vous coincé en soutenant IE6?

Source

2009-12-17 21:13:32 thomas

le bit horizontal peut être réalisé assez facilement

#content {margin-left:200px;} 
#left-bar {float-left;width:100px;}

Le bit vertical est plus délicat car il n'y a pas d'équivalent vertical du flotteur. Une approximation qui pourrait fonctionner est:

html,body 
{ 
    min-width:800px; 
    max-width:1680px; 
    width:100%; 
    height:100% 
    } 
    #header 
    { 
    width:100%; 
    height:100px; 
    background:#CCCCCC url(images/header_bg.gif) repeat-x; 
    position:absolute; 
    top:0; 
    left:0; 

    } 
    #footer 
    { 
    width:100%; 
    height:10px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    } 
    #container 
    { 
    width:100%; 
    height:100%; 
    margin-top:100px; 
    margin-bottom:10px; 
    } 
    #leftbar 
    { 
    height:100%; 
    width:200px; 
    float:left; 

    } 
    #content 
    { 
    height:100%; 
    margin-left:200px; 
    overflow:auto; 
    }

Source

2009-12-18 01:00:43 wheresrhys

Vous pouvez utiliser calc(), par exemple:

#container { 
    ... 
    height: calc(100% - 100px - 10px); 
}

Et vous pouvez soit les marges d'utilisation ou le positionnement fixe pour régler la position de celui-ci entre l'en-tête et pied de page.

En ce qui concerne les barres de défilement, il suffit d'appliquer overflow: hidden-body et div#container et appliquer overflow: auto-div#content.

Source

2015-04-15 20:51:53

mise en page css: une hauteur de 100% div (plus divs l'intérieur ainsi) avec deux hauteur fixe divws

Répondre

Questions connexes