堆栈内存溢出
  繁体   English   中英

如何清除页面底部的空白

[英]How to get rid of white space at the bottom of the page

 原文  2015-12-18 20:26:34  3   5    html/ css/ html5/ css3/ whitespace

问题描述

我正在将第一个网站编码为收藏夹，并且底部有一些不需要的空白不会消失。

我已经检查了所有常用的解决方案，例如，设置正文和页脚的高度，将下边距和填充设置为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>

5 个解决方案

解决方案1
 1  2015-12-18 20:33:47

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

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

解决方案2
 1 已采纳  2015-12-18 20:33:57

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

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

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

一个快速的解决方法是改用margin-top 。 实际上，这将移动元素及其占用的空间，而不是使其看起来好像位于较高位置。

解决方案3
 0  2015-12-18 20:33:03

您正在将“基本”高度设置为160px。 没必要，尝试摆脱它。

解决方案4
 0  2015-12-18 20:34:29

您需要从基类中删除高度 

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

    }

解决方案5
 0  2015-12-18 21:00:32

我更新了jsfiddle，以显示一种从底部删除空格的方法。

我对CSS进行了两项更改。 我将#base高度更改为auto，并将.footer img的高度更改为20px。 当然，您将要为适当的图像使用高度。 我想说明的一点是，问题的部分原因是图像高度降低了性能。

如果可以解决您的问题，请将其标记为可接受的答案。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何摆脱底部的空白空间 如何消除屏幕底部的空白？ 如何摆脱空白 如何摆脱页面右侧的空白？ 如何摆脱页面右侧的空白/边距 如何摆脱页面顶部的空白？ 页面侧面有空白，无法摆脱它 你如何摆脱页面底部的开放空间？ 如何摆脱页面底部的灰色空间？ 我的网页底部有一些不必要的空白，有人可以帮我摆脱它吗？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM