CSS: min-height funktioniert nicht

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

  •  12-09-2019
  •  | 
  •  

Frage

Jedes Mal, wenn ich die min0height Eigenschaft der DIVs fügen Sie 100% zu machen, funktioniert es nicht. Ich habe sie alle der DIVs hinzugefügt, einschließlich height: 100%; und min-height: 100%; aber nichts funktioniert. Was würde ich es den ganzen Weg zu machen tun zu verlängern? Es schneidet in unmittelbarer Nähe des Hintergrund der Seitenleiste und die Hintergrundfarbe des Inhaltsbereich.

alt text

(Passwort, einen Teil zu beschriften. Der Inhaltsbereich mit dem weißen Hintergrund ist .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>
War es hilfreich?

Lösung

Feste. Es war die div-Container direkt nach dem Body-Tag. Auch mit der Höhe CSS, erstellt es Probleme. Ich entfernte sie und geändert, um ein Skript, das ich auf die document.body in diesem div von Rendering hatte und alles funktioniert jetzt.

Andere Tipps

Wenn Sie versuchen, Ihre Inhalte und die Seitenleiste zu machen über die gesamte Höhe der Seite strecken, dann kein Betrag der Einstellung einer Höhe wirklich helfen wird. Wenn Sie 100% verwenden, gehen Ihre Ihre Fotter vom unteren Rand der Seite schieben, damit Sie es sehen müssen blättern. Es gibt eine einzige Methode, die ich kenne, können Sie mit einer Fußzeile einen vollen Höhe Körper haben: Sticky Footer

Überprüfen Sie die folgende Website für Details: http://www.cssstickyfooter.com/

Ein weiterer Trick, dass Sie wahrscheinlich benötigen. Es ist fast unmöglich, zwei Spalten zu bekommen gleiche Höhe zu haben und von allen Browsern unterstützt. Der einfachste Weg, um Ihre grauen Spalte links und weißen Mitte Körper zu bekommen, den ganzen Weg in die Fußzeile zu strecken ist eine 1-Pixel Höhe Bild zu verwenden, die grau und weiß in den richtigen Proportionen aufweist, die entlang der y-Hintergrund-wiederholt ist Achse.

Ein weiterer großer Standort für CSS Wissen A List Apart .

Es ist schwierig, eine gleichmäßige Layout mit floats und Positionierung auf die gleichen Elemente zu erhalten. Insbesondere Schwimmer und position: fixed (oder absolut) nicht kompatibel ist und jeder Browser behandelt die Situation anders

.

IE6 nicht unterstützt Position: an allen festen und behandelt sie als Position. Statisch (der Standard - keine Positionierung überhaupt)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top