0

我建立了一个练习网站，但侧边栏一直在页脚下方或与它混合。这是所有代码（至少一页）和稍后的css。我只需要一个快速的帮助，我知道一个公平的份额，但并不多，所以请帮助。

<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>Polyverse</title>
<link rel="stylesheet" href="style.css">
</head>
<!--main part-->
<!--header-->
<body>
<div id="container">
    <div>
        <body background="images/bg.jpg"></div>
    <div id="header">
        <h1><center><img src="images/header.png" width="960" height="120"         alt=">/center></h1>
<!--navbar-->
        <nav id="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="articles.html">Articles</a></li>
                <li><a href="downloads.html">Downloads</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
        </nav>
    </div>
<!--main content-->
    <div id="sidebar">
        <p>And my sidebar stuff here.</p>
    </div>
    <div id="main">
    <h1><p>About</p></h1>
    <article><p>All my text goes here</p></article>
    </div>
<!--footer-->   
    <div id="footer">
    <address><p align=right>Last updated the 24th of July 2013<br> Polyverse     copyright</p> 
        </address>
    </div>
</div>
</body>
</html>

和CSS：

 html,
#body   {
    width: 960px;
    margin: 25px auto;
    padding-left: 1em;
    font-family: Oswald, "Times New Roman",
        Times, sans-serif;
    height:100%;
    }


#container {
    position: relative;
    padding-bottom: 50px;
    min-height: 100%;
    margin: 0 auto 0 auto;
}

#navbar {
    width: 960px;
}

#navbar ul { 
    margin: 0; 
    padding: 5px; 
    list-style-type: none; 
    text-align: center; 
    background-color: #000; 
    } 

#navbar ul li {  
    display: inline; 
    } 

#navbar ul li a { 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #fff; 
    background-color: #000; 
    } 

#navbar ul li a:hover { 
    color: #000; 
    background-color: #fff; 
    } 

#main {
    float: left;
    width: 600px;
}

#sidebar {
    float: right;
    width: 200px;
}
    address {
        margin-top: 1em;
        padding-top: 1em;
        border-top: thin dotted 
        }

    p {
    width: 800px;
    margin: 25px auto;
    }

#footer: {
    height: 50px;
    width: 960px;
    position: absolute;
    bottom: 0;
}

所以我只是想知道，我将如何解决它？

4

3 回答 3

0

如果您可以删除position: absolute所有您需要做的就是清除您的页脚：

#footer {
    clear: both;
}

both将防止元素向左（例如#main）或向右（例如 ）浮动#sidebar。

如果您只想清除#sidebar而不是清除#main，请使用clear: right;

于 2013-07-25T18:30:25.070 回答
0

好吧，除了您的 HTML 充满错误之外，我建议您创建container一个类并将其添加到顶部容器之后。是的，clear你的floats

像这样......（也清理了你的HTML）...... http://jsfiddle.net/feitla/TC73U/

<div class="container">
    <div id="footer" class="clearfix"> <address><p align="right">Last updated the 24th of July 2013<br/> Polyverse     copyright</p> 
    </address>
    </div>
</div>
于 2013-07-25T18:36:20.483 回答
0

我建议在继续修复 CSS 之前修复 HTML 代码中的所有错误。

于 2013-07-25T18:40:49.743 回答