在我的CSS示例中，我创建了一个高度为50px的水平菜单。还尝试使用粘性页脚，但顶部菜单的高度更高，并且因为它在页脚底部页面下方出现了一个50px的大白色位置。 [IE10上存在问题。尚未在其他浏览器中测试过。]
html文件：
<!doctype html>
<html>
<head>
<!-- Load jQuery from Google's CDN -->
<script src="jquery-1.9.1.js"></script>
<!-- Source our javascript file with the jQUERY code -->
<script src="script.js"></script>
<link rel="stylesheet" href="runnable.css" />
</head>
<body>
<div id="header">
<div id="headerline">
<div class="wrapper">
<ul class="navigation">
<li class="logo">
<a href="#">WebApp</a>
</li>
<li class="tmenu">
<a href="#"><span class="menuItem">Site Events</span></a>
<ul class="smenu">
<li><a href="#"><span>Consulting</span></a></li>
<li><a href="#"><span>Sales</span></a></li>
<li><a href="#"><span>Support</span></a></li>
</ul>
</li>
<li class="tmenu">
<a href="#"><span class="menuItem">Text files</span></a>
<ul class="smenu">
<li><a href="#">Company</a></li>
<li><a href="#">Mission</a></li>
<li><a href="#">Contact Information</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="wrapper">
<div class="contentbox">
<h1>Welcome Message</h1>
<p class="date">3/31/2014 - 4:37 PM</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dui tempus, iaculis arcu sit amet, porttitor turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu quam mi. Morbi ac nulla eget diam commodo faucibus. Proin dignissim elit a ligula rhoncus, vitae viverra justo dignissim. In congue quam molestie, mollis ante sed, viverra urna. Pellentesque massa velit, eleifend a magna nec, vulputate gravida dui. Integer pulvinar id arcu ut faucibus. Phasellus vitae augue ac eros sollicitudin vehicula. Nunc aliquam leo a laoreet consequat. Fusce tristique mauris sed neque feugiat, id dignissim dui bibendum. Ut hendrerit commodo mi. Nunc pharetra, eros ut ultricies ultricies, erat lectus vehicula odio, vel suscipit odio nisi eu tellus. Integer interdum adipiscing gravida. Donec vitae neque diam. Mauris interdum eu nulla nec interdum.</p>
<p class="text">Vivamus eu quam ut felis hendrerit mattis ac nec urna. Maecenas erat felis, gravida ut porttitor at, congue eget mauris. Phasellus interdum dolor sem, et gravida massa scelerisque ac. Pellentesque non rhoncus orci. Quisque viverra tellus justo, eu congue mi mattis eget. Fusce a nulla urna. Fusce et mauris eget lorem lacinia sollicitudin. Fusce condimentum neque quis est tristique,aliquet dui sodales.</p>
<p class="text">Donec at velit nec nibh porttitor auctor quis non ipsum. Vestibulum condimentum viverra mattis. Praesent sed quam ultricies magna tempor tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed venenatis nulla eget sapien hendrerit vulputate. Donec sed libero justo. Aliquam diam felis, feugiat ac vulputate vel, iaculis at lorem. Nam facilisis lacus nec turpis bibendum, sit amet rutrum eros ultrices. </p>
<p class="text">Quisque quis scelerisque risus. Fusce a lacinia velit, non vestibulum ipsum. Donec nunc ipsum, semper quis sagittis nec, facilisis id felis. Morbi eget magna volutpat, adipiscing dui ac, elementum est. Curabitur sem diam, rhoncus in lorem eu, sodales eleifend sem. Etiam bibendum convallis fermentum. Donec ullamcorper pulvinar neque in auctor. Vestibulum tincidunt arcu vel orci molestie porta. Quisque quis commodo velit, eget vulputate nibh. Cras eu venenatis tellus. </p>
<p class="text">Duis ultricies accumsan euismod. Nulla pulvinar felis placerat vehicula rutrum. Etiam placerat vitae lacus nec laoreet. In nunc nibh, tincidunt sed dictum sit amet, ultrices vel enim. Nulla in urna molestie, pulvinar massa non, consectetur augue. Ut et ligula vitae libero vehicula mollis. Suspendisse nisl felis, pretium eget libero in, pharetra porttitor lectus. Nunc tincidunt nunc neque. Donec eget interdum ante. Pellentesque vehicula sapien eu lectus tempus interdum. Suspendisse pharetra purus id lectus cursus dapibus. Proin sed lorem dignissim, placerat est sit amet, blandit diam. Ut ut risus vitae neque sodales rhoncus nec ac massa. Fusce ac augue tincidunt, vulputate augue sit amet, varius tellus. Vivamus a tortor ipsum. Vestibulum in tellus neque.</p>
</div>
</div>
</div>
<div id="footer">
<div id="fback">
<div class="wrapper">
<div id="fContent">
<ul><p>Help</p>
<li>About WebApp</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul><p>FAQ</p>
<li>Question</li>
<li>Question</li>
<li>Question</li>
</ul>
<ul><p>Contacts</p>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS文件：
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
/*border: 2px solid red;*/
}
body {
font-family: arial;
text-align: center;
background:url(foo) fixed;
height: 100%;
/*border: 2px solid red;*/
}
div.wrapper {
width: 1100px;
margin: 0 auto;
padding: 0;
}
/*=== header ===*/
div#header {
text-align: center;
position: fixed;
_position: absolute;
top: 0;
left: 0;
_top:expression(eval(document.body.scrollTop));
display: block;
width: 100%;
}
div#headerline {
padding: 0;
margin: 0;
background: #e6e6e6;
height: 50px;
border-bottom: solid 1px #172740;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.navigation li{
float: left;
}
ul.navigation a {
text-decoration: none;
display: block;
}
span.menuItem {
display: inline;
display: inline-table;
display: inline-block;
line-height: 68px;
}
li.logo {
font-family: tahoma;
font-size: 40px;
font-weight: bold;
}
li.logo a {
padding: 0;
height: 50px;
width: 180px;
text-align: left;
}
li.tmenu {
float: left;
width: 160px;
position: relative;
}
li.logo a, li.tmenu > a { /* ">" means the first level of this type of children*/
color: #172740;
text-shadow: 2px 2px white;
}
li.tmenu a {
width: 160px;
height: 50px;
}
li.tmenu > a {
font-weight: 600;
}
li.tmenu > a:hover {
font-weight: 900;
}
ul.smenu {
display: none;
position: absolute;
margin-left: 0px;
list-style: none;
padding: 0px;
background: #172740;
border: solid 1px #000;
}
ul.smenu, ul.smenu li {
width: 160px;
float: left;
}
ul.smenu a {
display: block;
height: 20px;
padding: 8px 0px;
color: #fff;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px #000;
}
ul.smenu a:hover {
font-weight: bold;
}
/*=== content ===*/
div#content {
text-align: left;
/*position: relative;*/
min-height: 60%;
margin-top: 50px;
}
h1 {
padding: 0;
margin: 0;
padding-top: 50px;
color: #253e66;
font-size: 25px;
}
p.date {
font-size: 8px;
color: #aaa;
}
p.text {
font-size: 14px;
margin-bottom: 6px;
}
/*=== Footer ===*/
div#footer {
padding-top: 50px;
width: 100%;
min-height: 20%;
}
div#fback {
overflow: hidden;
padding: 0;
margin: 0;
background: #253e66;
text-align: center;
}
div#fContent {
color: #e6e6e6;
text-align: center;
}
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 50px 0px;
font-size: 14px;
}
div#fContent ul > p {
font-weight: bold;
padding-bottom: 12px;
}
div#fContent li {
padding-bottom: 3px;
}
/*=== Copyright content ===*/
JS档案：
$(document).ready(
/* This is the function that will get executed after the DOM is fully loaded */
function () {
/* Next part of code handles hovering effect and submenu appearing */
$('.tmenu').hover(
function () { //appearing on hover
$('ul', this).fadeIn();
},
function () { //disappearing on hover
$('ul', this).fadeOut();
}
);
}
);
同样奇怪的是，如果我在BODY上设置边框，那么白色空间的大部分就会消失。请帮帮我，我在CSS中搞砸了什么，以及如何修复我的代码。非常感谢。
答案 0 :(得分：0)
请不要引用我这个...但我认为段落元素给出了空格，所以要删除它使其边距为0px。希望这是正确的答案，如果不是请回请评论MontyX。感谢
答案 1 :(得分：0)
我改变了div＃fContent ul：
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 50px 0px;
font-size: 14px;
}
到：
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 0px 0px;
font-size: 14px;
}
<强> DEMO