CSS: min-height ne fonctionne pas

StackOverflow https://stackoverflow.com/questions/958888

  •  12-09-2019
  •  | 
  •  

Question

Chaque fois que j'ajouter la propriété min0height aux DIVs pour les faire à 100%, il ne fonctionne pas. Je les ai ajoutés à tous les DIVs, y compris la hauteur: 100%; et min-height: 100%; mais rien ne fonctionne. Que ferais-je pour le faire prolonger tout le chemin? Il coupe juste à côté de l'arrière-plan de la barre latérale et la couleur de fond de la zone de contenu.

text alt

(Mot de marquer une partie. La zone de contenu avec l'arrière-plan blanc est .col1)

CSS: 

@charset "UTF-8";
/* CSS Document */

img {
    border-style: none;
    color: #FFF;
    text-align: center;
}
body {
    background-color:#000;
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
}
.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
}
.menu {
    background-image:url(../images/top_menu/background.png);
    background-repeat:repeat-x;
    height:25px;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    top:0px;
    z-index:5;
    background-color:#000;
}
.bottom_menu {
    background-image:url(../images/bottom_menu/background.png);
    background-repeat:repeat-x;
    height:20px;
    z-index:2;
    font: 12px Helvetica, Arial, Sans-Serif;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    bottom:0px;
}
.colmask {
    position:relative;      /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%; /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
}
.sidebar .colright {
    float:left;
    width:200%;
    position:relative;
    left:225px;
    background:#fff;
}
.sidebar .col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:225px;
}
.sidebar .col1 {
    margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
    position:relative;
    right:100%;
    overflow:hidden;
}
.sidebar .col2 {
    float:left;
    width:225px;
    position:fixed;
    top:0px;
    left:0px;
    margin-top:25px;
    margin-left:5px;
    right:225px;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}

HTML 

<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
    <div class="colright">
      <div class="col1wrap">
            <div class="col1" id="contentDIV">
                Content
            </div>
        </div>
        <div class="col2">
            Sidebar Content
        </div>
    </div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
Était-ce utile?

La solution

Correction

. Il était le conteneur div juste après la balise body. Même avec CSS en hauteur, il a créé des problèmes. Je l'ai enlevé et changé un script que je devais de rendre dans cette div au document.body et tout fonctionne maintenant.

Autres conseils

Si vous essayez de faire votre contenu et la barre latérale étirer toute la hauteur de la page, aucune quantité de réglage d'une hauteur va vraiment aider. Si vous utilisez 100%, vous allez pousser votre Fotter vers le bas de la page afin que vous devez faire défiler pour le voir. Il y a une seule méthode que je connaisse qui vous permettra d'avoir un corps pleine hauteur avec un pied de page: Sticky Footer

Consultez le site suivant pour plus de détails: http://www.cssstickyfooter.com/

Une autre astuce vous aurez probablement besoin. Il est presque impossible d'obtenir deux colonnes d'avoir une hauteur égale et supporter tous les navigateurs. La façon la plus simple pour obtenir votre colonne grise au corps central gauche et blanc pour étirer tout le chemin vers le pied de page est d'utiliser une image Hight 1 pixel qui a gris et blanc dans les proportions appropriées, qui est arrière-plan répété le long de la y axe.

Un autre site pour la connaissance CSS est A List Apart .

Il est difficile d'obtenir une mise en page en utilisant des flotteurs et cohérente positionnement sur les mêmes éléments. En particulier flottant et la position: fixe (ou absolu) sont incompatibles et chaque navigateur gère la situation différemment

.

IE6 ne prend pas en position: fixed du tout, et le traite comme fonction:. Statique (par défaut - pas de positionnement du tout)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top