个人中心
gpt4 book ai didi

html - 边框未覆盖整个站点 - 元素流出？

转载 作者：太空宇宙 更新时间：2023-11-03 20:03:10 25 4
gpt4 key购买 nike

问题:

https://postimg.cc/image/tunhwh8qj/

我目前遇到的问题是我 body 周围的边界没有勾勒出所有的轮廓。正如我最近了解到的那样，我猜这意味着一个元素由于 float 而脱离了流程？但是我不确定在这种情况下如何解决它。

我的 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;
}

提前谢谢大家!!

最佳答案

发生这种情况是因为您的 body 固定高度为 100%。将 body 标签 css 更改为:

height:auto;
min-height: 100%

如果这不起作用，则添加以下内容:

overflow:auto;

关于html - 边框未覆盖整个站点 - 元素流出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7469213/

25 4 0
文章推荐： matlab - 大量包含对象的小 .mat 文件的高效磁盘访问
文章推荐： c# - 处理列表和 List.Take()
文章推荐： matlab - 使用 MATLAB 同时播放多个视频
文章推荐： c# - 调用 FileOpenPicker.PickSingleFileAndContinue() 时总是得到 "Access is denied"
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com