2

我有 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>
4

3 回答 3

2

不要碰任何东西，只需 padding-bottom: 20px; 添加 .col2

.col2是你身体表的容器

试试这个：

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

新演示

于 2013-10-06T19:38:40.363 回答
2

像这样给你的页脚更大的边距

footer {
    border:1px solid orange;
    position: relative;
    padding:0px;
    margin-top:20px;
    font-size:15px;
}
于 2013-10-06T19:38:55.453 回答
2

这是更新的小提琴

margin-bottom在 CSS 中向表格中添加一些像素。

例如 

table{
    margin-bottom:60px;
}
于 2013-10-06T19:39:00.983 回答