gpt4 book ai didi

javascript - 页眉到 margin-top 的高度

转载 作者:太空宇宙 更新时间:2023-11-04 08:40:15 25 4
gpt4 key购买 nike

我有一个 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

最佳答案

  1. 您需要删除 <center></center>从你的 HTML
  2. 在 CSS 中,删除 .body 之前的点-> 这就是为什么 text-align: center;不工作
  3. 页面中有 jQuery 吗?
  4. 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/

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