CSS：min-height不起作用

每當我將min0height屬性添加到DIV使其成爲100％時，它都不起作用。我已將它們添加到所有DIV中，包括身高：100％;和最小高度：100％;但沒有任何工作。我會怎樣做才能讓它一直延續下去？它只是切斷了側邊欄的背景和內容區域的背景色。CSS：min-height不起作用

alt text

（忘記標記一部分與白色背景內容區域是.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>

來源

2009-06-06 Devin

固定。它是正文標籤後面的容器div。即使有CSS高度，也會產生問題。我刪除了它，並將我在該div中呈現的腳本更改爲document.body，現在一切正常。

來源

2009-06-06 03:35:05 Devin

如果您試圖讓內容和邊欄伸展整個頁面高度，那麼設置高度不會有什麼幫助。如果你使用100％，你會把你的福特推到頁面的底部，所以你必須滾動才能看到它。有一個方法，我知道的，讓你有一個完整的高體與頁腳：粘頁腳

檢查以下網站了解詳細信息：http://www.cssstickyfooter.com/

您可能需要另一個竅門。幾乎不可能讓兩列具有相同的高度並支持所有瀏覽器。讓灰色列到左側和白色中央主體一直延伸到頁腳的最簡單方法是使用具有適當比例的灰色和白色的1像素高圖像，該圖像沿y方向重複背景軸。

CSS知識的另一個很棒的網站是A List Apart。

來源

2009-06-06 03:02:43 jrista

我沒有得到的唯一的事情是頁腳和標題只是浮動的div。它不應該影響側邊欄和內容的其他div。也許我錯了，但我覺得頁眉和頁腳沒問題。 – Devin 2009-06-06 03:17:07

您的頁眉和頁腳確實沒有任何問題，如果您不關心擁有全高內容區域。這種粘性頁腳技術是我知道的僅有的一種技術，可以通過頁腳獲得全高內容區域......我已經使用了多年的CSS（完成了90年代中期以來的工作）） – jrista 2009-06-06 03:30:27

使用浮動和定位在相同的元素上很難得到一致的佈局。特別是浮動和位置：固定（或絕對）是不兼容的，每個瀏覽器都以不同的方式處理這種情況。

IE6不支持位置：固定並將其視爲position：static（默認 - 根本沒有定位）。

來源

2009-06-06 03:47:37 Emily

CSS：min-height不起作用

回答

相關問題