表单的使用似乎使页脚与内容保持联系；页面底部不粘 [英] Use of forms seem to keep footer attached to content; not sticky at bottom of page

问题描述

我正在制作的网页上有两种表格.在所有我没有表单的页面上，页脚整齐地位于页面底部，但是一旦我引入表单，页脚下面就会有一些空白，其大小与页脚大小相同，并且会粘贴到表单上.无论是什么视口，它都应位于页面底部.我已经在广泛寻找该问题的答案，但是找不到答案.

I've got two forms on a webpage I'm making. On all the pages I have no forms on, the footer sits neatly at the bottom of the page however as soon as I introduce forms, the footer has some whitespace below it about the same size as the footer and sticks to the form. It should stay at the bottom of the page no matter viewport. I've looked extensively for an answer to this but can't find one.

我尝试使用此 http://matthewjamestaylor .com/blog/keeping-footers-at-the-bottom-of-page-这个人的博客来修复它，但是没有解决.

I tried using this http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page person's blog to fix it but it didn't.

任何帮助将不胜感激.

body {
    background-color: #40E39C;
    display: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    }
    
.style1{
    border: 2px;
    border-radius: 20px;
    border-color: #D6B656;
    background-color: #FFF2CC;
}
.style2{
    border: 2px;
    border-radius: 20px;
    border-color: #82B366;
    background-color: #D5E8D4;
}
.container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -142px;
    margin-top: 30px;
}

.footer {
    background-color: #EAEDD0;
    text-align: center;
    width: 100%;
    }
.footer, .push {
    height: 142px;
}
.footer li {
    display: inline-block;
}
.footer ul {
    text-align: center;
    margin: 0;
}

<div class="container">
        <div id="restaurant-book">
            <form class="style1" style="text-align: center;">
                <div style="display:inline;clear:both;">
                    First name: <br/><input type="text" name="firstName" required/><br/><br/>
                    Last name: <br/><input type="text" name="lastName" required/><br/><br/>
                </div>
                <div style="display:inline;clear:both;">
                    <?php if (isset($_POST["date"])){?>
                    Booking date: <br/><input type="date" value="<?php echo $_POST['date'] ?>" required/><br/><br/>
                    <?php } else {?>
                    Booking date: <br/><input type="date" required/><br/><br/>
                    <?php } ?>
                </div>
                <div style="display:inline;clear:both;">
                    <?php if (isset($_POST["time"])){?>
                    Time: <br/><input type="time" min="09:00:00" max="22:00:00" step="1800" value="<?php echo $_POST['time'] ?>" required/><br/><br/>
                    <?php } else {?>
                    Time: <br/><input type="time" min="09:00:00" max="22:00:00" step="1800" required/><br/><br/>
                    <?php } ?>
                </div>
                <div style="display:inline;clear:both;">
                    Number of adults: <br/><input type="number" max="10" required/><br/><br/>
                </div>
                <div style="display:inline;clear:both;">
                    Number of children (0-11 years): <br/><input type="number" max="10" required/><br/><br/>
                </div>
                <div style="display:inline;clear:both;">
                    Number of tables: <br/><input type="number" max="5" required/><br/>
                </div>
            </form>
        </div>
        <div class="push"></div>
    </div>
    <footer class="footer">
    <ul>
        <li><a href="./a.html">A | </a></li>
        <li><a href="./b.html">B | </a></li>
        <li><a href="./c.html">C | </a></li>
        <li><a href="./d.html">D | </a></li>
        <li><a href="./e.html">E | </a></li>
        <li><a href="./f.html">F </a></li>
    </ul>
</footer>

推荐答案

我想我明白了，请尝试将其添加到您的 css 中，但先删除推送" div

I think I got you, try adding this to your css BUT first remove the "push" div

.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
position: fixed;
bottom: 0;
}

这篇关于表单的使用似乎使页脚与内容保持联系；页面底部不粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！