如何删除内容和页脚之间的空白

Question

我有一个问题，我有这个网站，虽然它运行良好并且我在网站底部有一个粘性页脚，但它在内容末尾之间有很多空间

我想删除空白

现在我将如何 go 关于这个 html 在这里：

<html lang="en">
    <head>

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
         <link href="styles.css" rel="stylesheet">
        <link href="menu1.css" rel="stylesheet">
        <link href="author.css" rel="stylesheet">
        <!-- Social Media Icon Library -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <title></title>
    </head>

    <body>
        <head>
            <!--Navigation-->
            <article class="top">
            <div class="" id="line">
                <img class="logo" src="logo.png" alt="logo">
                <h1><span class="lines">D.P.P</span></h1>
            </div>
            <span class="lines">
                <ul>
                    <li><a href="index.html" style="color: #cac0cc">Home</a></li>
                    <li><a href="book.html" style="color: #cac0cc">Nada menos que Max</a></li>
                    <li><a href="inspiration.html" style="color: #cac0cc">Inspiration</a></li>
                    <li><a href="contact.html" style="color: #cac0cc">Contact</a></li>
                </ul>
                <hr>
                <hr>
            </span>
            <script src="menu.js"></script>
            </article>
            <div class="spacer">&nbsp;</div>
        </head>
        <main id="content">
            <table>
                <tr>
                    <td id="main">
                        <h3> </h3>
                        <span>.</span>
                    </td>
                    <td id="img"><img id="Diana" src=""></td>
                </tr>

            </table>


        </main>
    </body>
    <footer>
        <hr>
        <article>
            <p>Connect</p>

显然，为此删除了个人信息并不重要。

我使用的 css 如下： author.css：

h3
{
    text-align: center;
}

#main
{
    width: 66%;
    margin-right: 100px;
    margin-left: 150px;
    padding-left: 100px;
    padding-right:5%;

}

#Diana
{
    height: 50%;
}

#img
{
    width: 33%;
    margin-right: 40px;
}

Menu.css 用于导航栏和顶部：

ul
{
    width:100%;
    list-style: None;
    margin: 0;
    padding: 0;
    top: 0;
    background-color: #7d8a96;

}

li
{
    width:25%;
    float:left;
    border-right: none;
}

li:last-child
{
    border-right:none;
}
li a
{
    display: block;
    width:100%;
    background:#f9f7fa;
    padding:4% 10%;
    font-size:1em;
    text-decoration: none;

}


@media screen and (max-width: 768px) {
    #menu
    {
        width:1.4em;
        display: block;
        background:#ddd;
        font-size:1.35em;
        text-align: center;
    }
    #nav.js
    {
        display: none;
    }
    ul
    {
        width:100%;
        list-style:none;
    }
    li
    {
        width:100%;
        border-right:none;
    }
}

@media screen and (min-width: 768px)
{

    #menu
    {
        display: none;
    }
}

/*Lines on sides*/
.lines
{
    line-height: 0.5;
    text-align: center;
}

.lines span
{
    display: inline-block;
    position: relative;
}

.lines span:before,
.lines span:after
{
    content: "";
    position: absolute;
    height: 5px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    top: 0;
    width: 600px;
}

.lines span:before
{
    right:100%;
    margin-right: 15px;
}

lines span:after
{
    left: 100%;
    margin-left: 15px;
}


h1
{
    margin-top: 50px;
    font-size: 1rem;
    font-style: oblique;
    font-weight: thin;
    color: #4e565e;
    text-align: center;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.top
{
    width: 100%;
    height: 100px;
    padding: 10px;
}


.spacer
{
    width: 100%;
    height: 100px;
}

#content
{
    margin-top: 50px;
    width: 100%;
    height: 100%;
    padding: 10px;

}

.logo
{

    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 5%;
    margin-bottom: -50px;
}

和风格。css

*
{
    margin: 0;
    padding: 0;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}


footer
{
    margin-top: 150px;
    flex-shrink: 0;
    text-align: center;
}

html, body
{
    height: 100%;
}
body
{
    display: flex;
    flex-direction: column;
}

#content
{
    min-height: calc(100vh - 70px);
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
    flex: 1 0 auto;
}

我怎么会 go 关于这个

Answer 1

也许您可以更改内容的最小高度，因为目前它设置为 100vh

改变

#content
{
    min-height: calc(100vh - 70px);
}

至

#content
{
    min-height:30vh;
}

如何删除内容和页脚之间的空白

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-18 11:08:33

如何删除内容和页脚之间的空白

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-18 11:08:33

解决方案1
0 已采纳 2020-05-18 11:08:33