标题的高度到页边距的顶部

Question

我有一个标头，其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>标签和. 从身体

Answer 1

您需要从HTML中删除<center></center>
在CSS中，删除.body >之前的点，这就是text-align: center;的原因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>

Answer 2

您使用了$符号，但未引用JQ库

Answer 3

您的js代码有问题...请尝试将其修复为以下代码

$(function() {
  var headerHeight = $(".header").height() + "px";
  $(".container").css("margin-top", headerHeight);
});

要么

window.onload = function() {
  var headerHeight = $(".header").height() + "px";
  $(".container").css("margin-top", headerHeight);
};

https://codepen.io/linjiyeah/pen/NjJXNo <---您可以在这里看到结果

Answer 4

为什么您需要使用JavaScript来解决此问题？ 只需在容器中放置页边空白即可。 这里的工作示例

.container {
  margin-top:200px
}

Answer 5

jQuery中没有onload函数。 文档准备ready时，可以将其置于ready功能。 您可以以这种方式编写它，而无需更改任何样式。

$(function(){ // You can also write $(document).ready(function({ // code}) like this
    var headerHeight = $('.header').height() + 'px';
    $('.container').css('margin-top', headerHeight);
})

检查这里： https : //plnkr.co/edit/hTUg5ANMifkPoc2z8lwW?p=preview

标题的高度到页边距的顶部

问题描述

5 个解决方案

解决方案1
1 已采纳 2017-05-25 09:27:43

解决方案2
0 2017-05-25 09:27:32

解决方案3
0 2017-05-25 09:28:47

解决方案4
0 2017-05-25 09:32:50

解决方案5
0 2017-05-25 09:41:46

标题的高度到页边距的顶部

问题描述

5 个解决方案

解决方案1 1 已采纳 2017-05-25 09:27:43

解决方案2 0 2017-05-25 09:27:32

解决方案3 0 2017-05-25 09:28:47

解决方案4 0 2017-05-25 09:32:50

解决方案5 0 2017-05-25 09:41:46

解决方案1
1 已采纳 2017-05-25 09:27:43

解决方案2
0 2017-05-25 09:27:32

解决方案3
0 2017-05-25 09:28:47

解决方案4
0 2017-05-25 09:32:50

解决方案5
0 2017-05-25 09:41:46