我有一个 header position: fixed;
但它之后的内容仍保留在标题后面。
我试过用 JS 设置 margin-top标题高度的内容，但不起作用。
这里是 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheetini.css">
<script src="javas.js"></script>
<title></title>
</head>
<body onscroll="scrolling()">
<div class="header">
<p>Example</p>
</div>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut orci arcu. Morbi in neque libero. Pellentesque in tortor magna. Nam tempus suscipit sem id viverra. Duis blandit, massa sed tristique pharetra, mauris arcu convallis quam, id rutrum urna elit tristique mauris. Duis condimentum mi vel libero consectetur tempor. Ut tempor odio vitae neque varius, nec finibus leo rhoncus.
</div>
<div class="footer">
ExampleExample
</div>
</body>
</html>
CSS:
body {
background-color: #DFB36D;
text-align: center;
}
.header {
position: fixed;
font-size: 50px;
background-color: #BBBBBB;
top: 0;
left: 0;
width: 100%;
}
.container {
}
还有 JS:
$(document).onload(){
var headerHeight = $('.header').height() + 'px';
$('.container').css('margin-top', headerHeight);
}
提前致谢。 https://jsfiddle.net/nxhoqcz9/
实际删除<center>标签和 .从 body
最佳答案
- 您需要删除
<center></center>从你的 HTML - 在 CSS 中，删除
.body之前的点-> 这就是为什么text-align: center;不工作 - 页面中有 jQuery 吗？
- JS 的语法不正确
CSS:
body {
background-color: #DFB36D;
text-align: center;
}
.header {
position: fixed;
font-size: 50px;
background-color: #BBBBBB;
top: 0;
left: 0;
width: 100%;
}
JS:
$(document).ready(function() {
var headerHeight = $('.header').height() + 'px';
$('.container').css('margin-top', headerHeight);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheetini.css">
<title></title>
</head>
<body onscroll="scrolling()">
<div class="header">
<p>Example</p>
</div>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut orci arcu. Morbi in neque libero. Pellentesque in tortor magna. Nam tempus suscipit sem id viverra. Duis blandit, massa sed tristique pharetra, mauris arcu convallis quam, id rutrum urna elit tristique mauris. Duis condimentum mi vel libero consectetur tempor. Ut tempor odio vitae neque varius, nec finibus leo rhoncus.
</div>
<div class="footer">
ExampleExample
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="javas.js"></script>
</body>
</html>
关于javascript - 页眉到 margin-top 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44176861/