Question

我将我的第一个网站编码为一个帮助，并且底部有一些不受欢迎的空白区域不会消失。

我已经检查了所有常用的解决方案，例如给予身体和身体。页脚高度，设置底部边距和填充到0但它们似乎不起作用。有人可以看看代码（下面链接），让我知道我做错了什么？

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>

Answer 1

您的页脚小于页脚的容器。这就是为什么有空的空间。

从height:160px移除#base或向其添加position:relative，然后position:absolute; bottom:0px添加.fixedwidthfooter（两者的结果略有不同）。

Answer 2

您将“基准”高度设置为160px。没必要，试着摆脱它。

Answer 3

它与您包含的地图样式有关。你在frontpagemap上做了一些导致额外空格的定位。

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

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

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

Answer 4

您需要从基类中删除高度

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

    }

Answer 5

我更新了jsfiddle以显示从底部删除空白的方法。

我对css做了两处修改。我将#base高度更改为auto，然后将.footer img的高度更改为20px。您当然希望使用适合图像的高度。我想说明的一点是问题的一部分是图像高度正在推动事情发展。

如果它解决了您的问题，请将此标记为已接受的答案。

如何摆脱页面底部的空白区域

5 个答案: