表单的使用似乎使页脚与内容保持联系； 页面底部不粘

Question

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

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

任何帮助将不胜感激。

 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> 

Answer 1

我想我了解您，请尝试将其添加到您的CSS中，但先删除“推送” div

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