个人中心
gpt4 book ai didi

html - 如何摆脱页面底部的空白

转载 作者：太空宇宙 更新时间：2023-11-04 02:42:53 27 4
gpt4 key购买 nike

我正在为我的第一个网站编写代码，但底部有一些不会消失的不需要的空白区域。

我已经检查了所有常用的解决方案，例如提供正文和页脚高度，以及将底部边距和填充设置为 0，但它们似乎不起作用。有人可以看一下代码(链接如下)并让我知道我做错了什么吗？

https://jsfiddle.net/cshotter/s9k1w6z7/

CSS

<!DOCTYPE html>
<html>
<head>
    <title>Quality Precast Concepts</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">


    body {
        margin: 0 auto;
        padding: 0;
        font-family:  Helvetica, Arial, sans-serif;
        background-color: #EEEEEE;

    }

    a:link {
        color: #111111;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;

    }

    .break {
        clear: both;
    }

    #container {
        width: auto;
    }

    #header {

        width: 100%;
        height: 163px;
        color: #FFFFFF;
        background-color: #DDDDDD;


    }

    .fixedwidthheader {
        width: 1000px;
        background-color: #D2691E;
        margin: 0 auto;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
        box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        height: auto;
    }

    .fixedwidthbody {
        width: 1000px;
        background-color: #EEEEEE;
        margin: 0 auto;
        border-left: 1px solid black;
        border-right: 1px solid black;
        box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        height: auto;
    }

    .fixedwidthfooter {
        width: 1000px;
        background-color: #D2691E;
        margin: 0 auto;
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        height: auto;
    }



    #toplogodiv {
        float: left;
        padding-top: 10px;
        padding-left: 10px;
        margin: 0 auto;

    }

    #toplogodiv img {
        height: 120px;

    }

    #headercontactinfo {
        width: 300px;
        text-align: right;
        float: right;
        position: relative;

        top: 46px;
        margin: 0 auto;
        font-size: 1.1em;
    }

    #headercontactinfo p {
        padding-right: 10px;
    }

    #headermenudiv {
        position: relative;
        top: 9px;
        left: -1px;     
    }

    #headermenudiv ul {     
        background-color: #333333;
        padding: 0;
        margin: 0;
        height: 20px
    }

    #headermenudiv li {
        list-style: none;
        font-size: 0.8em;
        float: left;
        padding: 0px 10px 0 10px;
        border-right: 1px solid #D2691E;
        background-color: none;
        margin-top: 3px;       
    }

    #midsection {
        color: #333333;
        width: auto;        
        background-color: #DDDDDD;
    }

    #midsection img {
        width: 1000px;
        height: 360px;
        box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 1px black;        
    }

    #maincontent {
        padding: 10px 0 20px 10px;
        background-color: #EEEEEE;
        position: relative;
        top: -24px;
    }


    .list {
        padding-left: 10px;
    }

    #frontpagemap {
        padding: 0;
        margin: 0;
        float: right;
        position: relative;
        top: -310px;
        left: -50px;
    }

    #base {
        background-color: #DDDDDD;
        width: 100%;
        height: 160px;
        color: white;

    }

    #footer {       
        height: 65px;

    }

    #footer img {
        position: relative;
        top: -30px;
        left: 10px;
        width: 140px;

    }

    #footercontact {
        float: right;
        position: relative;
        top: -8px;
        left: -10px;

    }

    #designtag {
        float: left;
        height: 20px;       
    }



    </style>

</head>

HTML

<body >

    <div id="container">

        <div id="header">

            <div class="fixedwidthheader" id="border">

                <div id="toplogodiv">

                    <img src="images/logo.png">

                </div>

                <div id="headercontactinfo">

                    <p>03 347 4768</p>
                    <p><a href="mailto:sales@qualityprecast.co.nz">sales@qualityprecast.co.nz</a></p>

                </div>

                <div class="break"></div>

                <div id="headermenudiv">

                    <div class="fixedwidthheader">

                        <ul>

                            <li><a href="http://www.qualityprecast.co.nz/home/"></a>Home</li>

                            <li><a href="http://www.qualityprecast.co.nz/products/"></a>Products</li>

                            <li><a href="http://www.qualityprecast.co.nz/projects/"></a>Projects</li>

                            <li><a href="http://www.qualityprecast.co.nz/about-us/"></a>About Us</li>

                            <li><a href="http://www.qualityprecast.co.nz/our-team/"></a>The Team</li>

                            <li><a href="http://www.qualityprecast.co.nz/contact-us/"></a>Contact Us</li>

                        </ul>               

                    </div>

                </div>

            </div>

        </div>          

        <div class="break"></div>

        <div id="midsection">

            <div class="fixedwidthbody">

                <img src="images/header.jpg">               

                <div id="maincontent">

                    <h1>Welcome to Quality Precast Concepts</h1>

                    <h3>Quality Precast &amp; Prestressed Concrete made in Christchurch</h3>

                    <p>We are a Canterbury born and bred company located on Christchurch&rsquo;s doorstep &ndash; Rolleston. Our aim is to be the supplier of choice for high quality precast &amp; prestressed products. Because of our locastion and adaptable set-up, we are able offer an extensive and complete range of manufacturing and product options to meet your precast concrete needs.</p>

                    <p>Our areas of expertise include:</p>

                    <p class="list"><strong>Prestressed</strong></p>
                        <ul>
                            <li>Unispan</li>
                            <li>Flat Slab</li>
                            <li>Interspan (rib &amp; infill system)</li>
                            <li>Double Tees</li>
                            <li>Hollow Core</li>
                        </ul>

                    <p class="list"><strong>Precast</strong></p>
                        <ul>
                                <li>Tilt Slab Panels</li>
                                <li>Beams</li>
                                <li>Columns</li>
                                <li>Spandrels</li>
                                <li>Bleachers</li>
                                <li>Stairs &amp; Landings</li>
                        </ul>

                    <div id="frontpagemap">

                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2889.8448452950684!2d172.3751009160351!3d-43.58894799364694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d32033a1f3d6193%3A0xa416fb59f65b7fab!2s889+Jones+Rd%2C+Rolleston+7675!5e0!3m2!1sen!2snz!4v1450467163060" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

                    </div>

                </div>

            </div>

        </div>

        <div id="base">

            <div class="fixedwidthfooter">

                <div id="footer">

                    <img src="images/logo.png">

                    <div id="footercontact">

                        <p>Contact us today  |  03 347 4768  |  <a href="mailto:sales@qualityprecast.co.nz">sales@qualityprecast.co.nz</a></p>

                        <p>889 Jones Road, Rolleston, Christchurch</p>

                    </div>

                    <div id="designtag">

                        <a href="http://www.cswebdesign.co.nz">Website by CSWeb-Design</a>

                    </div>                  

                </div>

            </div>

        </div>

    </div>

</body>
</html>

最佳答案

它与您包含的 map 样式有关。您正在 frontpagemap 上进行一些定位，这导致了额外的空白。

#frontpagemap {
    padding: 0;
    margin: 0;
    float: right;
    position: relative;
    top: -310px;
    left: -50px;
}

基本上，当您执行 position: relative; 时，该元素占用了它通常占用的空间，但您只是让它看起来像使用 top 时更高: -310px。从技术上讲，它仍然占用了它通常占用的空间。

一个快速的解决方法是使用 margin-top 代替。这实际上会移动元素及其占用的空间，而不是仅仅让它看起来好像位置更高。

关于html - 如何摆脱页面底部的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34363434/

27 4 0
文章推荐： html - Bootstrap 3 轮播不工作？
文章推荐： c - 定时器实现超时功能
文章推荐： c - 如何使用文件扩展名的访问方法？
文章推荐： python - 使用 matplotlib 和 Pandas DataFrame 绘制数据覆盖图
太空宇宙
个人简介

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

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