無法將列拉伸至頁腳

因此，我仍然非常喜歡使用CSS。我正在爲我的學校開發我的網站。我已經完成得很好，但我有一個小問題。我似乎無法弄清楚如何讓我的左右兩列伸展到頁腳。無法將列拉伸至頁腳

有人可以看看網站嗎？我已經將它上傳到我的服務器，以便您可以在那裏查看CSS和XHTML。

我還會發佈下面的代碼。網站地址：http://www.tylerrobinson.net/mult128/index2.html

感謝您花時間查看！

THE CSS：

body { 
    background-color: #FFFFFF; 
    text-align: center; 
    margin: 20px; 
    padding: 0; 
    font: normal 0.8em/1.2em verdana,aria,sans-serif; 
    color: #333; 
    } 

@font-face { 
    font-family: 'dinorma_normal'; 
    src: url('type/dinorma-webfont.eot'); 
    src: url('type/dinorma-webfont.eot?#iefix') format('embedded-opentype'), 
url('type/dinorma-webfont.woff') format('woff'), 
url('type/dinorma-webfont.ttf') format('truetype'), 
url('type/dinorma-webfont.svg#dinorma_normal') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

a { 
    color:#FFF; 
    text-decoration:none; 
    } 

a:hover { 
    color: #9ECF38; 
    } 

#wrapper1 { 
    position:relative; 
    text-align:left; 
    width:100%; 
    background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right; 
    } 
#wrapper2 { 
    position:relative; 
    text-align:left; 
    width:100%; 
    background:url("../images/leftcolor_bg.gif") repeat-y top left; 
    } 

#header { 
    background-color: #791642; 
    padding: 10px; 
    margin: 0; 
    text-align: left; 
    color: #FFF; 
    } 

#header img { 

} 

#header h1 { 
    font-size:200%; 
    } 

#header a:hover { 
    color:#7A2875; 
    } 


/*--Menu CSS Start*/ 

#navbar { 
    margin: 0; 
    padding: 0px; 
    height: 1em; 
    position: absolute; 
    right: 150px; 
    top: 50px; 
    z-index: 100; 
    font-family: 'dinorma_normal', cursive; 
    font-size:1.5em; 
} 

#navbar li { 
    list-style: none; 
    float: left; 
} 

#navbar li a { 
    display: block; 
    padding: 10px 8px; 
    background-color: #9ECF38; 
    color: #000; 
    text-decoration: none; 
} 

#navbar li ul { 
    display: none; 
    width: 10em; /* Width to help Opera out */ 
    background-color: #D2E9A3; 
} 

#navbar li:hover ul { 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    background-color: #D2E9A3; 

} 

#navbar li:hover li { 
    float: none; 
    background-color: #D2E9A3; 

} 

#navbar li:hover li a { 
    background-color: #D2E9A3; 
    border-bottom: 1px solid #fff; 
    color:white; 
} 

#navbar li li a:hover { 
    background-color: #D2E9A3; 
    color:white; 
} 

#navbar li:hover ul, #navbar li.hover ul { 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    background-color: #D2E9A3; 
    color:white; 
} 

#navbar li:hover li, #navbar li.hover li { 
    float: none; 
    background-color: #D2E9A3; 
} 

#navbar li:hover li a, #navbar li.hover li a { 
    background-color: #9ECF38; 
    border-bottom: 1px solid #fff; 
    color: #000; 
} 

/*--Menu CSS End*/ 

/*--Quick Nav*/ 

#quicknav li li { 
    margin: 0 0 0 0; 
    list-style-type:none; 
    text-indent:-42px; 
    text-align:left; 
} 

#maincol { 
    position:relative; 
    margin:0; 
    padding:10px; 
    background-color:#9ECF38; 

    } 
#leftcol { 
    position:relative; 
    top:-10px; 
    left:-10px; 
    float:left; 
    width:220px; /* for IE5/WIN */ 
    voice-family: "\"}\""; 
    voice-family:inherit; 
    width:200px; /* actual value */ 
    margin:0 0 -10px 0; 
    padding:10px; 
    background-color:#D12673; 
    z-index:1; 
    } 
#rightcol { 
    position:relative; 
    top:-10px; 
    right:-10px; 
    float:right; 
    width:220px; /* for IE5/WIN */ 
    voice-family: "\"}\""; 
    voice-family:inherit; 
    width:200px; /* actual value */ 
    margin:0 0 -10px 0; 
    padding:10px; 
    background-color:#D12673; 
    z-index:1; 
    } 
#centercol { 
    position:relative; 
    padding:0 240px; 
    } 
#centercol a { 
    color:#666; 
    } 
#centercol a:hover { 
    border-bottom:1px solid; 
    color:#9343B9; 
    } 
#footer { 
    position:relative; 
    top:1px; 
    background-color: #791642; 
    width:100%; 
    clear:both; 
    margin:0; 
    padding:1% 0; 
    text-align:center; 
    color:#CCC; 
    }

的XHTML：

<!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>Mult128 - Tyler Robinson</title> 
<link href="css/index_style_1.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<div id="header"> 
    <div id="logo"><img src="assets/trnet_logo.png" width="141" height="66" alt="Tyler Robinson Logo" /> 
</div> 

<ul id="navbar"> 
    <li><a href="#">LO 3</a><ul> 
     <li><a href="lo3/assign3_1_1.html">Assign 3.1 - EX 1</a></li> 
     <li><a href="#">Assign 3.1 - EX 2</a></li> 
     <li><a href="#">Assign 3.1 - EX 3</a></li> 
     <li><a href="#">Assign 3.2 - 2 Column Fixed</a></li> 
     <li><a href="#">Assign 3.2 - 3 Column Fixed</a></li> 
     <li><a href="#">Assign 3.2 - 2 Column Liquid</a></li> 
     <li><a href="#">Assign 3.2 - 3 Column Liquid</a></li> 
     <li><a href="#">Assign 3.2 - 2 Column Shared</a></li> 
     <li><a href="#">Assign 3.3 - Design Review</a></li></ul> 
    </li> 
    <li><a href="#">LO 4</a><ul> 
     <li><a href="#">Assign 4.1</a></li> 
     <li><a href="#">Assign 4.2</a></li></ul> 
    </li> 
    <li><a href="#">LO 5</a><ul> 
     <li><a href="#">Assign 5.1</a></li></ul> 
    </li> 
    <li><a href="#">LO 6</a><ul> 
     <li><a href="#">Assign 6.1</a></li></ul> 
    </li> 
    </ul> 

    <!-- Menu End --> 

    </div> <!--Menu div End --> 
</div> <!-- Header tag end --> 



<div id="wrapper1"><!-- sets background to white and creates full length leftcol--> 

    <div id="wrapper2"><!-- sets background to white and creates full length rightcol--> 

     <div id="maincol"><!-- begin main content area --> 

<div id="leftcol"><!-- begin leftcol --> 
    <ul id="quicknav"> 
    <li>LO 3<ul> 
     <li><a href="lo3/assign3_1_1.html">Assign 3.1 - EX 1</a></li> 
     <li><a href="#">Assign 3.1 - EX 2</a></li> 
     <li><a href="#">Assign 3.1 - EX 3</a></li> 
     <li><a href="#">Assign 3.2 - 2 Column Fixed</a></li> 
     <li><a href="#">Assign 3.2 - 3 Column Fixed</a></li> 
     <li><a href="#">Assign 3.2 - 2 Column Liquid</a></li> 
     <li><a href="#">Assign 3.2 - 3 Column Liquid</a></li> 
     <li><a href="#">Assign 3.2 - 2 Column Shared</a></li> 
     <li><a href="#">Assign 3.3 - Design Review</a></li></ul> 
    </li> 
    <li>LO 4<ul> 
     <li><a href="#">Assign 4.1</a></li> 
     <li><a href="#">Assign 4.2</a></li></ul> 
    </li> 
    <li>LO 5<ul> 
     <li><a href="#">Assign 5.1</a></li></ul> 
    </li> 
    <li>LO 6<ul> 
     <li><a href="#">Assign 6.1</a></li></ul> 
    </li> 
    </ul> 
</div><!-- end leftcol --> 

      <div id="rightcol"><!-- begin rightcol --> 
       <p><strong>Some of My Work</strong></p> 
    <p><img src="assets/bc.gif" width="197" height="178" alt="My Business Card" /><img src="assets/small_layla.png" width="149" height="265" alt="Layla My Daughter" /></p> 

    <p> 
     <a href="http://validator.w3.org/check?uri=referer"><img 
     src="http://www.w3.org/Icons/valid-xhtml10" 
     alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> 
    </p> 
      </div><!-- end righttcol --> 

      <div id="centercol"><!-- begin centercol --> 
       <p><strong><abbr title="Advanced HTML">MULT128</abbr></strong> is a course about standards based <abbr title="Extensible HyperText Markup Language">XHTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr>, and <abbr title="Dynamic HTML">DHTML</abbr>. In this course we will be building <dfn title="Built according to W3C standards">standards-based</dfn> web sites.</p> 
<p>This unstyled web page is my barebones start to this course. It will be updated and changed by me, Tyler Robinson, a student of <abbr title="Saskatchewan Institute of Applied Science and Technology">SIAST</abbr>, while staying in accordance with the principles laid out for XHTML development by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p> 


      </div><!-- end centercol --> 

     </div><!-- end main content area --> 

     <div id="footer"><!-- begin footer --> 
      <p>This is the footer</p> 
     </div><!-- end footer --> 

    </div><!-- end wrapper1 --> 

</div><!-- end wrapper2 --> 
</body> 
</html>

來源

2014-06-06 user3491276

嘿，看看我的答案，如果這就是你要找的:) –

應用此對你#leftCol：

position:absolute; 
height:100%; 
padding:0px; 
left:0px; 
top:0px;

相似度您#rightCol。

position:absolute; 
height:100%; 
padding:0px; 
right:0px; 
top:0px;

結果看起來像下面這樣：

enter image description here

來源

2014-06-06 22:42:17

此表現的很出色。謝謝！ – user3491276

太棒了，別忘了+1 :)） –

切換到CSS的左列，是

#leftcol { 
    position:absolute; 
    top:0px; 
    left:0px; 
    bottom:10px 
    float:left; 
    width:220px; /* for IE5/WIN */ 
    voice-family: "\"}\""; 
    voice-family:inherit; 
    width:200px; /* actual value */ 
    margin:0 0 -10px 0; 
    padding:10px; 
    background-color:#D12673; 
    z-index:1; 
}

位置應該聲明爲絕對（或固定）爲了賦予div頂部，底部，左側，右側屬性（即絕對定位它），儘管它並非總是必要的。

來源

2014-06-06 22:40:46 AndreasB

無法將列拉伸至頁腳

回答

相關問題