css - 内容 div 位于导航栏上方
问题描述
所以我有一个固定在顶部的导航栏,为此我已经使用过position: fixed
,但由于某种原因,我的内容覆盖了它。我想要这样的东西:
html {
position: relative;
min-height: 100%;
}
.header {
top: 0;
position: fixed;
}
.footer {
position: fixed;
bottom: 0
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Static Template</title>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
Codesandbox 演示: https ://codesandbox.io/s/laughing-dew-2g2r6?file=/index.html
解决方案
margin-top
您必须在课程中添加一些row
内容。
html {
position: relative;
min-height: 100%;
}
.header {
top: 0;
position: fixed;
}
.row {
margin-top: 50px;
}
.footer {
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Static Template</title>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
推荐阅读
- mql5 - MQL5 多变量数组结构
- reactjs - 在远距离组件之间传递函数的正确方法
- c# - 当您的代码依赖于(本地)DLL 时如何配置构建过程
- javascript - 链接创建和画布下载图像只能在 Chrome 中使用一次
- python - Theano 给出 TypeError: 'Add' object is not iterable
- android - Android App Link 声明网站关联 SHA-256 指纹错误
- python-2.7 - 我没有得到 BlockReference 的位置?
- javascript - 单击时显示指定元素的功能
- dns - 如何在wos2is中更改localhost的域名?
- node.js - 如何添加对模型的引用?