无法将列拉伸到页脚

时间：2014-06-06 22:15:37

标签： html css

所以我对CSS还很新。我正在为学校开发我的网站。我把它完成得很好，但我有一个小问题。我似乎无法弄清楚如何让我的左右列伸展到页脚。

有人可以看一下这个网站吗？我已将其上传到我的服务器，因此您可以在那里查看CSS和XHTML。

我还会发布以下代码。网站的网址：http://www.tylerrobinson.net/mult128/index2.html

感谢您花时间看看！

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>

2 个答案:

答案 0 :(得分：0)

将左栏的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顶部，底部，左侧，右侧属性（即绝对定位它），尽管并非总是必要。

答案 1 :(得分：0)

将此应用于#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

相关问题
最新问题