试图让页脚扩展到文本的底部

时间：2013-01-30 08:38:43

标签： html css footer clear

我正在尝试将页脚（#sitemap）扩展到文本的底部。

这是一件简单的事情，但我尝试使用我认为可行的代码：

clear: both;

它不起作用。请帮帮我。

以下是该网站的链接： http://students.thenet.ca/jlandon/new/

HTML

    

<head>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/isolatedhowlv2-1.css"/>
<title>Isolated Howl Web Design &amp; Development</title>
<meta name="description" content="Isolated Howl is a web design and development company owned and operated by a single design student. Isolated Howl offers web &amp; graphic design, development &amp; programming, social media and website maintenance." />
<meta charset="UTF-8"/>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="images/favicon.ico">
</head>

<body>
<div id="page">

<header id="main">
    <figure id="logo">
        <img src="images/logo.gif" id="howllogo" alt="logo"/>
    </figure>
    <h1>Isolated Howl</h1>
</header>

<nav id="mainnav">
    <ul>
        <li><a href="workshop/index.html">Workshop</a></li>
        <li><a href="services/index.html">Services</a></li>
        <li><a href="school/index.html">School</a></li>
        <li><a href="about/index.html">About</a></li>
        <li><a href="contact/index.html">Contact</a></li>
    </ul>
</nav>

<article id="mission">
    <p>If you've come here looking for a quick-fix, simple website: you've come to the wrong place. If you're looking for a refreshing, stimulating &amp; captivating website: have a seat and let's talk.</p>
    <br />
    <p>Isolated Howl is more than a studio. Inspiring content is collected and put through a sorting machine called relevance. It's filtered down until it is refined into the absorbing material it was meant to be. The cherry on top is the design which will be easy to use and understand - built for the user. Add in some compelling visuals and viola! The perfect-for-you website is born out of the mist.</p>
    <br />
    <footer><p>If this has inspired you, please check out the <a href="#">contact</a> page.</p>
    <p>If you need another push in the right direction, check out the <a href="#">workshop</a>.</p>
    <p>For more information, check out Isolated Howl's <a href="#">about</a> page.</p></footer>
</article>

<footer id="sitemap">
    <nav>
    <div class="col"><h1><a href="workshop/index.html">Workshop</a></h1>
        <ul>
            <li><a href="http://students.bcitwebdev.ca/jlandon">Isolated Howl V1.0</a></li>
            <li><a href="/ihv2/index.php">Isolated Howl V2.0</a></li>
            <li><a href="http://students.bcitwebdev.ca/jlandon/school/finalproject/nomcover.html">Restaurant Mock-Up</a></li>
            <li><a href="geordieirving/index.php">Geordie Irving's Portfolio</a></li>
            <li><a href="#">West Coast Finance</a></li>
            <li><a href="#">Insider Films</a></li>
            <li><a href="#">Shawn Muys' Portfolio</a></li>
            <li><a href="#">Rayne Longboards</a></li>
        </ul>
    </div>
    <div class="col"><h1><a href="services/index.html">Services</a></h1>
        <ul>
            <li><a href="#">Web &amp; Graphic Design</a></li>
            <li><a href="#">Development &amp; Programming</a></li>
            <li><a href="#">Social Media</a></li>
            <li><a href="#">Website Maintenance</a></li>
        </ul>
    </div>
    <div class="col"><h1><a href="school/index.html">School</a></h1>
        <ul>
            <li><a href="school/week1/index.html">Week 1</a></li>
            <li><a href="school/week2/index.html">Week 2</a></li>
            <li><a href="school/week3/index.html">Week 3</a></li>
        </ul>
    </div>
    <div class="col"><a href="about/index.html"><h1>About</h1></a></div>
    <div class="col2"><a href="contact/index.html"><h1>Contact</h1></a></div>
    </nav>
    <div id="connect"><h2>Stay Connected</h2>
        <a href="FACEBOOK" onMouseOver="document.facebook.src='images/facebook2.gif';" onMouseOut="document.facebook.src='images/facebook.gif';"><img src="images/facebook.gif" alt="facebook" id="facebook"></a>
        <a href="TWITTER" onMouseOver="document.twitter.src='images/twitter2.gif';" onMouseOut="document.twitter.src='images/twitter.gif';"><img src="images/twitter.gif" alt="twitter" id="twitter"></a>
        <a href="GOOGLE+" onMouseOver="document.google.src='images/google2.gif';" onMouseOut="document.google.src='images/google.gif';"><img src="images/google.gif" alt="google" id="google"></a>
    </div>
    <div id="copyright">Copyright &copy; Isolated Howl 2012-2013 Vancouver, British Columbia, Canada</div>
</footer>

</div>

</body>
</html>

CSS 

@font-face  {
font-family: "scala";
src: url('../fonts/sketchscalasans.ttf');
}

@font-face  {
font-family: "district";
src: url('../fonts/districtthin.ttf');
}

body    {
background-image: url('../images/space.jpg');
background-attachment:fixed;
color: #FFFFFF;
font: normal 100%;
background-color: #000000;
}

#page   {
width: 80%;
margin-right: auto;
margin-left: auto;
}

#logo   {
width: 52.08333333333333%; /* 500px / 960px */
margin-left: auto;
margin-right: auto;
}

#howllogo   {
width: 100%;
}

#main {
width: 100%;
}

#main h1    {
font-family: "scala";
font-size: 4.5em; /* 72px / 16px */
font-weight: normal;
text-align: center;
}

#mainnav    {
font-family: "scala";
font-size: 1.5em; /* 18px / 16px */
font-weight: normal;
text-align: center;
width: 68.75%; /* 660px / 960px */
margin-left: auto;
margin-right: auto;
}

#mainnav li {
list-style-type: none;
display: inline;
width: 19.6969696969697%;
text-align: center;
}

#mainnav ul {
width: 100%;
}

#mainnav a:link, a:visited  {
color: #FFFFFF;
text-decoration: none;
}

#mainnav a:hover    {
color: #6986AE; /* light blue */
text-decoration: none;
}

#mission    {
width: 68.75%; /* 660px / 960px */
margin-right: auto;
margin-left: auto;
margin-top: 1.04166666666667%; /* 10px / 960px */
padding: 3.03030303030303%; /* 20px / 660px */
font-family: "district";
font-size: 1em;
color: #000000;
font-weight: normal;
background-color: #FFFFFF;
}

#mission a:link, a:visited  {
color: #3F5068; /* dark blue */
text-decoration: underline;
}

#mission a:hover    {
color: #6986AE; /* light blue */
text-decoration: none;
}

#sitemap    {
width: 68.75%; /* 660px / 960px */
margin-right: auto;
margin-left: auto;
padding: 3.03030303030303%; /* 20px / 660px */
font-family: "district";
font-size: 0.625em; /* 10px / 16px */
color: #FFFFFF;
background-color: #000000;
}

#sitemap a:link, a:visited  {
color: #FFFFFF;
text-decoration: none;
}

#sitemap a:hover    {
color: #FFFFFF;
text-decoration: underline;
}

#sitemap h1 {
font-size: 1.6em; /* 16px / 10px */
font-family: "scala";
}

#sitemap h1 a:link, a:visited   {
color:#FFFFFF;
text-decoration: none;
}

#sitemap h1 a:hover {
color: #6986AE;
text-decoration: none;
}

#sitemap h2 {
font-size: 1.4em; /* 14px / 10px */
}

.col    {
width: 18.18181818181818%; /* 120px /660px */
margin: 0 0 3.03030303030303% 0; /* 20px / 660px */
padding: 0;
float: left;
}

.col2   {
width: 18.18181818181818%; /* 120px /660px */
margin: 0;
padding: 0;
float: left;
}

#connect    {
width: 15.15151515151515%;
text-align: center;
float: right;
}

#copyright  {
width: 53.03030303030303%; /* 350px / 660px */
text-align: right;
float: right;
}

1 个答案:

答案 0 :(得分：0)

您可以将display:table用于#sitemap页脚; 

#sitemap    {
width: 68.75%; /* 660px / 960px */
margin-right: auto;
margin-left: auto;
padding: 3.03030303030303%; /* 20px / 660px */
font-family: "district";
font-size: 0.625em; /* 10px / 16px */
color: #FFFFFF;
background-color: #000000;
display: table;
}

注意：IE7及更低版本支持{strong>

。

相关问题
最新问题