Question

您好，我曾试图弄清楚如何在线上传我的作品，但找不到一个简单的免费虚拟主机上传我的HTML和CSS ...所以我提供了另一个截图。我希望我的问题不会太烦人 - 到目前为止你的帮助已经很棒了。

我目前遇到的麻烦是身体周围的边界并没有勾勒出一切。正如我最近了解到的那样，我猜这意味着由于浮动而导致元素流出？但是我不确定在这种情况下如何修复它。

我的HTML是：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <link rel="stylesheet" type="text/css" href="swaggersstyle.css">
        <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script> 
</head>


<body>
    <img src="final.jpg" id="banner">
    <ul id="nav">
        <li class="links"><a href="index.html">Home</a></li>
        <li class="links"><a href="planning.html">Location</a></li>
        <li class="links"><a href="construction.html">Facilities</a></li>
        <li class="links"><a href="evaluation.html">Attractions</a></li>
        <li id = "endlink"><a href="evaluation.html" id="lastlink">Bookings</a></li>
    </ul>


<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>

<div id="mainc">

    <p>Make Yourself at Home</p>
    <p>Swaggers Backpackers is a converted old house located within     walking distance of all the best parts of Oamaru. Explore the old   victorian era buildings and shops of the city centre, or see the    penguin colonies down the street. Swaggers is owned and operated    by camp mum Agra, who makes all guests feel welcome, informed,  and perhaps a bit mothered. </p>

    <div class="slideshow"> 
        <img src="1.jpg" width="600" height="450" /> 
        <img src="2.jpg" width="600" height="450" /> 
        <img src="3.jpg" width="600" height="450" /> 
    </div> 


</div>   



<div id ="footer">
<p> fsafasfasf </p>
</div>

</body>
</html>

我的CSS是：

html{
    font-family: sans-serif;
    background-color:#464E54;
    height: 100%;
}

body{
    width: 960px;
    margin: auto;
    background-color: white;
    border: 3px solid black;
    padding: 0;
    height: 100%;
}

#banner{
    padding: 0px;
    margin: 0;
    display: block;
}

#nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    border-bottom: 1px solid #7f7f7f;
    border-top: 1px solid #7f7f7f;

}

#mainc {
    float: left;
    width: 654px;
    background-color: white;
    margin: 0;
    padding-left: 8px;
    padding-right: 4px;
    height: 100%;
}

#leftcolumn {
    padding-left: 3px;
    float: left;
    background-color: #dad8bf;
    width: 290px;
    border-right: 1px solid #7f7f7f;
    height: 100%;
}

#footer {
    clear: both;
    position: relative;
    bottom: 0.5px;
    margin: 0;
    background-color: #dad8bf;
    border-top: 1px solid #7f7f7f;
}

#footer p{
    margin: 0;
}

.links {
    float: left;
    margin: 0px;
    border-right: 1px solid #7f7f7f;
}

#endlink {
    float: left;
    margin: 0px;
    border-right: none;
}

#lastlink{
    display: block;
    width: 184px;
    font-weight: bold;
    color: #444444;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

#lastlink:hover{
    background-color: #999999;
}

a:link {

    display: block;
    width: 183px;
    font-weight: bold;
    color: #444444;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

a:visited {

    display: block;
    width: 183px;
    font-weight: bold;
    color: #444444;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

a:hover {
    background-color: #999999;
}

a:active{
    background-color: #999999;
}

.slideshow {
    height: 483px;
    width: 632px;
    margin: auto;
    padding: 0px;
}

.slideshow img {
    padding: 0px;
    border: 1px solid #ccc;
    background-color: #eee;
}

先谢谢你们!!

Answer 1

这种情况正在发生，因为你的身体固定高度为100％。更改身体标签css为：

height:auto;
min-height: 100%

如果这不起作用，请添加以下内容：

overflow:auto;

Answer 2

可能最好不要将body元素用于容器。相反，只需添加

<div class="container"></div>

围绕您的代码和CSS，将html更改为body，将body更改为div.container。

body{
    font-family: sans-serif;
    background-color:#464E54;
    height: 100%;
}

div.container{
    width: 960px;
    margin: auto;
    background-color: white;
    border: 3px solid black;
    padding: 0;
}

编辑：我完全错过了100％，这就是它。

Answer 3

添加溢出：隐藏到您的身体元素。当元素浮动时，它不会将父容器高度推过它，除非有更清晰的

边界不覆盖整个网站 - 元素流出？

3 个答案: