HTML页脚/ Div定位
[英]HTML footer/Div positioning
问题描述
可能是一个简单的问题，但目前正在尝试创建一个带有横幅/页眉且带有菜单的页眉栏的个人网站。 两者都使用div，其主要内容介于两者之间。 由于某种原因，页脚栏出现在菜单/页眉栏的顶部，当我试图将其覆盖在主要部分下方时，将其覆盖，并使其停留在页面底部。
@font-face { font-family: "cicle-gordita"; src: url("fonts/Cicle_Gordita.ttf") format("truetype"); src: url("fonts/Cicle_Gordita.eot") format("opentype"); } body { left: 0; margin: 0; overflow: hidden; position: relative; background-color: #FFFFFF; } #banner { height: 50px; width: 100%; margin: 0px; padding: 0px; overflow: hidden; position: fixed; background-color: #000000; /*background-image: url("images/menuHor.png");*/ } .menuBit { height: 40px; width: 100px; margin: 0px; padding: 0px; float: left; margin-left: 10px; } .menuContent:hover { text-decoration: underline; cursor: pointer; } .menuContent { font-family: "cicle-gordita"; font-size: 30px; text-align: center; padding: 0px; margin: 0px; margin-top: 10px; color: #ffffff; } .main { position: fixed; margin: 0px; margin-top: 50px; padding: 0px; width: 100%; height: 90%; background: #ff0000; overflow: hidden; } #footer { width: 100%; background: #000000; height: 50px; position: fixed; clear: both; }
<!DOCTYPE html> <html lang="en"> <head> <title>Personal - Home</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" type="text/css" href="theme.css"> </head> <body> <div id="banner"> <div class="menu"> <div class="menuBit"> <h2 class="menuContent">HOME</h2> </div> <div class="menuBit"> <h2 class="menuContent">BLOG</h2> </div> <div class="menuBit"> <h2 class="menuContent">WORK</h2> </div> </div> </div> <div class='main'> <!-- Content Here --> </div> <div id="footer"></div> </body> </html>
如头部所示，我有一个jscript / jquery文件，但是其中包含的一小段代码可以在页面加载时淡化main，但它不会改变任何内容。
2 个解决方案
解决方案1
2 2016-10-24 19:02:43
加bottom: 0; 到#footer
默认值为top: 0;
解决方案2
-2 2016-10-24 19:06:32
#footer {
position: fixed;
}
当设置为fixed时，position属性将使元素保持固定位置，无论您如何滚动，其“固定”位置均由top or bottom,left or right属性确定。
如果您希望将其“正常”放置，请删除position: fixed属性，然后进行设置。
如果您确实希望将其修复，则可以按照Pat的回答。
页脚中的 DIV 定位
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.