我试图让我的页脚在没有足够内容时始终显示在页面底部。我尝试了几种解决方案，但都没有奏效。此外，下拉菜单还有一个小问题——当我将鼠标悬停在该组件上时，文本会移动。我应该在 CSS 中更改什么？谢谢!
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li><a href="">main menu</a></li>
<li><a>test</a>
<ul class="sub-menu">
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">test3</a></li>
<li><a href="">test4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>最佳答案
您需要使用 position:fixed 将页脚放在页面底部。
#footerwrap {
width: 1000px;
margin: 0 auto;
position: fixed;
bottom:0;
}
至于文本移动 slideToggle 似乎是在移动测试列表项的填充。通过在样式本身中设置填充，它可以解决问题。
<li ><a style="padding:0 38%">test</a>
关于css - 页面底部的页脚并在将鼠标悬停在下拉菜单上时停止移动文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48140545/