我在练习项目上遇到了一些麻烦，我几乎完成但是我的div页脚被一直推下来占据了太多的空间。对于如何解决这个问题，有任何的建议吗？
<!DOCTYPE html>
<html>
<head>
<title>Uniondale Public Libary</title>
<link rel="stylesheet" type="text/css" href="uplstyle.css">
</head>
<body>
<!-- top bar -->
<div class="container">
<div class="logo-pic">
<img src="https://uniondalelibrary.org/themes/Glass/images/logo.gif">
</div>
<!-- nav bar -->
<div class="navbar">
<div id="contain-nav">
<ul id="nav-list">
<li>Home</li>
<li>online catalog</li>
<li> Research Databases</li>
<li>Newsletters</li>
<li>Libary Information</li>
<li>Libray History</li>
<li>contact us</li>
</ul>
<p id="date">January 20 2020</p>
<hr id="nav-hr">
</div>
</div>
<!-- Empty style nav -->
<div class="fashion-nav">
</div>
<!-- The Main body -->
<div class="sidebar">
<h1>navigation</h1>
<ul id="sidenav">
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
</ul>
<hr id="sidenav-hr">
<ul id="sidenav">
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
</ul>
<hr id="sidenav-hr">
<ul id="sidenav">
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
<li>Serivce</li>
</ul>
<hr id="sidenav-hr">
</div>
<!-- welcome box -->
<div class="welcome main-cmn">
<h4>welcome</h4>
<p><a href="">Uniondale Libary services</a></p>
</div>
<!-- Event Keeper -->
<div class="evnt-kpr main-cmn">
<h4>EventKeeper</h4>
</div>
<!-- Libary Hours -->
<div class="hours-opt main-cmn">
<h4>Libary Hours</h4>
</div>
<!-- Free Digital Magazines -->
<div class="free-stuff main-cmn">
<h4>Free Digital Magazines</h4>
</div>
<!-- Libary app -->
<div class="libary-app main-cmn">
<h4>Libary App</h4>
</div>
<!-- New Language Database -->
<div class="newlang-db main-cmn">
<h4>New Language Database</h4>
</div>
<!-- Free Ancestry.com Database -->
<div class="ancestry main-cmn">
<h4>Free Ancestry.com Database</h4>
</div>
<!-- Tutor Program -->
<div class="tutor main-cmn">
<h4>Free Tutor online program</h4>
</div>
<!-- New online catalog -->
<div class="new-ctlg main-cmn">
<h4>New online catalog</h4>
</div>
<!-- Right sidebar -->
<div class="ctlg-search right-sidebar">
<h4>catalog search</h4>
<form>
<input type="radio" name="">
<label>Uniondale Libary</label>
<input type="radio" name="">
<label>Nassua Libraires</label>
<select>
<option>keyword</option>
<option>keyword</option>
<option>keyword</option>
<option>keyword</option>
</select>
<input type="text" name="">
<button>search</button>
</form>
</div>
<!-- Hours of op -->
<div class="right-opt right-sidebar">
<h4>Hours of opertation</h4>
<ul>
<li>Monday| 9AM-9PM</li>
<li>Monday| 9AM-9PM</li>
<li>Monday| 9AM-9PM</li>
<li>Monday| 9AM-9PM</li>
<li>Monday| 9AM-9PM</li>
<li>Monday| 9AM-9PM</li>
<li>Monday| 9AM-9PM</li>
<li>Monday| 9AM-9PM</li>
</ul>
</div>
<!-- Nassua e -->
<div class="nassua-e right-sidebar">
<h4>Nassua e</h4>
</div>
<!-- Admin login -->
<div class="admin-login right-sidebar">
<h4>Administrative Login</h4>
<form>
<label>username</label>
<input type="text" name="">
<label>username</label>
<input type="text" name="">
<input type="checkbox" name="">
<button>login</button>
</form>
</div>
<!-- Driving test -->
<div class="drv-tst right-sidebar">
<h4>Driving Tests</h4>
</div>
<!-- Tutors.com -->
<div class="web-tutor right-sidebar">
<h4>Tutor.com</h4>
</div>
<!-- Footer -->
<div class="feet">
<ul>
<li>Monday,Wednesday & Thursday</li>
<li>Monday,Wednesday & Thursday</li>
<li>Monday,Wednesday & Thursday</li>
<li>Monday,Wednesday & Thursday</li>
<li>Monday,Wednesday & Thursday</li>
<li>Monday,Wednesday & Thursday</li>
</ul>
</div>
</div> <!-- container -->
</body>
</html>
的CSS
/*elements global*/
html {
background: #840000;
}
body {
border: 2px solid #d10404;
width: 90%;
background: #d10404;
margin: auto;
}
/*class and id's*/
.container {
background: rgba(249, 102, 102, 1);
width: 98%;
margin: auto;
}
/*top bar*/
.logo-pic img {
width: 100%
}
.navbar {
margin-left: 5px;
margin-bottom: -21px;
}
#contain-nav ul{
background: #ba0000;
list-style: none;
clear: both;
overflow: hidden;
display: inline-flex;
padding: 10px;
width: 98%;
border-radius: 20px 20px 0px 0px;
margin: 0;
}
#nav-list li {
padding: 10px;
}
#date {
float: right;
margin: 0;
padding: 0;
position: relative;
bottom: 35px;
right: 10px;
}
#nav-hr {
margin: 0;
padding: 0;
position: relative;
bottom: 37px;
width: 99%;
}
.fashion-nav {
border: 3px solid #910202;
height: 10px;
background: #910202;
}
/*Side nav*/
.sidebar {
clear: both;
overflow: hidden;
width: 12%;
border: 2px solid black;
float: left;
}
/*Main body*/
.main-cmn {
border: 2px solid black;
width: 50%;
margin: auto;
position: relative;
padding: 10px;
}
/*right sidebar*/
.right-sidebar {
float: right;
width: 12%;
clear: both;
border: 2px solid black;
position: relative;
overflow: hidden;
bottom: 800px;
}
/*footer*/
.feet {
background: transparent;
}
.feet ul {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
.feet li {
float: left;
}
在css中，我尝试重置边距0和填充0并使用..底部但它无法正常工作。 Css可能很乏味lol Example1.1 Example
