（身高100％）加（2欄css）

Question

我需要一個2列的界面來拉伸100％的頁面高度。

PS：如果列太長，則應顯示滾動條。 解決了這個問題之后，我將嘗試在界面中添加粘性頁腳。

PPS：拜托，沒有使用“假”背景圖片的解決方案

我真的很努力地自己找到答案......謝謝你，如果你有任何想法

這是代碼

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
    <title>2 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title>

    <style media="screen" type="text/css">
/* <!-- */
*{
    margin:0;
    padding:0;
}

   html { 
    background-color: #ccc; 
        height: 100%; 
   } 
   body { 
    background-color: white; 
    width: 600px; 
    margin: 0 auto; 
height:100%; 
    position: relative; 
    border-left: 1px solid #888; 
    border-right: 2px solid black; 
   }  

#footer {
    clear:both;
    width:100%;
    height:0px;font-size:0px;
}


#container2 {


    clear:left;
    float:left;
    width:600px;
        overflow:hidden;
    background:#ffa7a7;  
}



#container1 {

    float:left;
    width:600px;
    position:relative;
    right:200px;
    background:#fff689;  
}
#col1 {
    float:left;
    width:400px;
    position:relative;
    left:200px;
        overflow:hidden;
}
#col2 {
    float:left;
    width:200px;
    position:relative;
    left:200px;
        overflow:hidden;
}
/* --> */
    </style>
</head>
<body>

<div id="container2">
    <div id="container1">
        <div id="col1">
            aaaa a a a a a a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a  a a a aa a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a aa a a a a aa aa a
        </div>
        <div id="col2">

            fghdfghsfgddn   fghdfghsfgddn    fghdfghsfgddn  fghdfghsfgddn   fghdfghsfgddn   fghdfghsfgddn   fghdfghsfgddn v
        </div>
    </div>
</div>
<div id="footer">
     &nbsp;
</div>
</body>

Answer 1

應該不那么難。 請看一下這段代碼。

<html>
<head>
<title>Columns</title>
</head>
<body>
<style type="text/css">
.wrapper {
    width:1200px;
    margin:0 auto;
}
.col1 {
    width:600px;
    height:100%;
    float:left;
    background:#f00;
}
.col2 {
    width:600px;
    height:100%;
    float:left;
    background:#00f;
}
</style>
<div class="wrapper">
    <div class="col1">
        Column 1
    </div>
    <div class="col2">
        Column 2
    </div>
</div>
</body>
</html>

.wrapper只是將2列居中。

Answer 2

根據您定位的瀏覽器，您可以使用最簡單的方法： CSS3列

.columns {
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

Answer 3

您是否嘗試從容器上的身體繼承高度？

IE高度：繼承;

（身高100％）加（2欄css）

問題描述

3 個解決方案

解決方案1
2 2010-05-19 15:51:58

解決方案2
1 2010-05-19 14:28:55

解決方案3
1 2010-05-19 22:51:28

（身高100％）加（2欄css）

問題描述

3 個解決方案

解決方案1 2 2010-05-19 15:51:58

解決方案2 1 2010-05-19 14:28:55

解決方案3 1 2010-05-19 22:51:28

解決方案1
2 2010-05-19 15:51:58

解決方案2
1 2010-05-19 14:28:55

解決方案3
1 2010-05-19 22:51:28