logo标签列表

使用CSS在页脚上方添加空白

htmlcss
3

我有一个带有HTML的CSS代码，我想在页脚上方添加空白，因为我的表格直接粘在页脚上。

请确保每次添加表格时，表格和页脚之间都有空间。

您可以在http://jsfiddle.net/hadinetcat/E8jd3/6/上查看我的代码。

CSS 代码:

<style type='text/css'>

    .container3 {
        float: left;
        width: 100%;
        /* background:green; */
        overflow: hidden;
        position: relative;
    }

    .container2 {
        float: left;
        width: 100%;
        background: #FFA500;
        position: relative;
        right: 45%;
    }

    .container1 {
        float: left;
        width: 100%;
        /* background:red; */
        position: relative;
        right: 40%;
    }

    .col1 {
        float: left;
        width: 26%;
        position: relative;
        left: 87%;
        overflow: hidden;
        height: 570px;
    }

    .col2 {
        float: left;
        width: 50%;
        position: relative;
        left: 90%;
        overflow: hidden;
    }

    .col3 {
        float: left;
        width: 26%;
        position: relative;
        left: 80%;
        overflow: hidden;
    }

    .footer {
        border: 1px solid orange;
        position: relative;
        padding: 0px;
        margin-top: -5px;
        font-size: 15px;
    }

    .signout {
        position: absolute;
        width: 200;
        bottom: 150px;
        left: 5px;
        clear: both;
        font-size: 20px;
        text-align: center
    }
</style>

HTML

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Wellcome To Balhalfe Services Customer Reports</h1>

<div class="container3 ">
    <div class="container1 ">
        <div class="container2 ">

        <div class="col1">
            lalalallalalalallala <br />
            lllllllllllllllllllll <br />
        </div>

        <div class="col2">
            <div align="center">
                <H2 align="center"> Report Table</H></div>

                <table border="1" align="center">
                    <tr>
                        <td><b>Name</b></td>
                        <td><b>Mime</b></td>
                        <td><b>Size (bytes)</b></td>
                        <td><b>Created</b></td>
                        <td><b>Download</b></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>eu contres.txt</td>
                        <td>text/plain</td>
                        <td>546</td>
                        <td>2013-08-22 00:06:55</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=4&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>

                    <tr>
                        <td>1594(HA 10 AL HAALY).pdf</td>
                        <td>application/pdf</td>
                        <td>60964</td>
                        <td>2013-08-29 23:40:07</td>
                        <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
                    </tr>
                </table>

            </div>

            <div class="col3">
            </div>

        </div>

    </div>

    <div class="signout">

    <a  style='text-decoration:none;' href= "index.html">Sign Out </br></a>

</div>

<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    Copyright © balhalfe services 20103-2014</div>
</div>
给你的页脚设置一个正的margin-top。 - Patsy Issa
根据您的JsFiddle，我只会给您的.footer添加一些padding-top。 - Paulie_D
http://jsfiddle.net/E8jd3/11/ - Naveen Kumar Alone
查看我发布的答案 https://dev59.com/_3fZa4cB1Zd3GeqPUamd#19213087 - Naveen Kumar Alone
@hadi 更新了答案，快去看看吧 http://jsfiddle.net/sunilkumar707/H8ns3/ - Sunil Kumar
3个回答
3

不要改动任何东西。只需在.col2中添加padding-bottom: 20px;。

.col2是您正文表格的容器。

尝试这个：

.col2 {
    float: left;
    width: 50%;
    position: relative;
    left: 90%;
    overflow: hidden;
    padding-bottom: 20px;
}

New Demo

1
请使用JSfiddle进行演示，因为根据OP的示例似乎无法正常工作。 - Paulie_D
你的代码运行良好 - 只需添加以下内容 margin-top: 15px; font-size: 15px; float: left; width: 100%; - Sunil Kumar
@Paulie_D，当我添加您的代码时，似乎左侧边栏与页脚分离了..col1 - hadi
2

像这样给您的页脚留出更大的边距：

footer {
    border: 1px solid orange;
    position: relative;
    padding: 0px;
    margin-top: 20px;
    font-size: 15px;
}
我刚刚编辑了答案：.footer --> footer，以包括标准的<footer>标签，假设这是作者的意图。 - rmbianchi
2

这里是更新后的示例。

在CSS中，将表格margin-bottom的像素值增加。

例如：

table{
    margin-bottom: 60px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接