gpt4 book ai didi

HTML 页脚/Div 定位

转载 作者:行者123 更新时间:2023-11-28 04:58:52 25 4
gpt4 key购买 nike

可能是一个简单的问题,但目前正在尝试创建一个个人网站,其中包含带有菜单的横幅/标题,效果很好,还有一个页脚栏。两者都使用 div,中间有一个“主要”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,它不会改变任何内容。

最佳答案

bottom: 0; 添加到 #footer

默认为top: 0;

关于HTML 页脚/Div 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40225609/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com