html - 如何将 div 置于另一个之下?
问题描述
这就是我想要做的:
在顶部固定导航栏,以便在滚动时向下移动,
然后我希望第一个 div 直接位于导航 div 下。这个 div 将覆盖 90% 的屏幕(导航栏为 10%)并且只包含一个图像。
在此之下,是我将在其中插入主要内容/文本的 div。如果您知道我的意思,向下滚动时它也应该占用 100% 的屏幕?
最后也是一个 div 中的小页脚栏。
查看我的代码,您会发现它非常基本,我想保持这种方式.. 我只需要 div 保持一个在另一个之下..
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: relative;
/*height: 10%;*/
width: 100%;
background-color: black;
color: white;
text-align: center;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
position: absolute;
width: 100%;
height: 100%;
background-image: url("img/background.jpg");
background-color: grey;
}
.content {
position: absolute;
height: 100%;
width: 100%;
background-color: white;
}
.footer {
height: 50px;
width: 100%;
background-color: yellow;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>John's Work</title>
<meta name="description" content="My Personal Portfolio">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div class="header">
</div>
<div class="content">
lorem ipsum text
</div>
<div class="footer">
Copyright by
</div>
</body>
</html>
解决方案
这让你满意吗(实际上我没有得到你想要的,但假设是这样的)
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
height: 50px;
top: 0px;
width: 100%;
background-color: black;
color: white;
text-align: center;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
position: absolute;
width: 100%;
height: 100%;
background-image: url("img/background.jpg");
background-color: grey;
}
.content {
position: absolute;
margin-top: 50px;
height: 100%;
width: 100%;
background-color: white;
}
.footer {
height: 50px;
width: 100%;
background-color: yellow;
}
<div class="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div class="header">
</div>
<div class="content">
lorem ipsum text
</div>
<div class="footer">
Copyright by
</div>
推荐阅读
- macos - 带有 Docker 的 ElasticSearch 7.10.1 在 Mac 下报告 java.net.UnknownHostException 但在 Linux 上不报告
- r - r lang for r 3.3 的问题
- javascript - 子组件的 NgClass 未触发
- r - 如何排除 predict.ranger 中的第一棵树?
- python - 如何理解python max函数中的key
- xml - Windows 10 多应用信息亭未打开所需站点或显示磁贴
- visual-studio-2019 - 如何根据 SonarLint for Visual Studio 的问题类型设置严重性?
- hive - 根据条件重置累积总和值并从当前行重新计算累积总和 - Hive/Spark Sql
- excel - 如何在 Excel 中“过滤”某些值,但始终将一致的行数作为输出
- elasticsearch - 聚合结果的 Elasticsearch 分组