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

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

Answer 2

您需要从HTML中删除<center></center>
在CSS中，删除.body - ＆gt;之前的点。这就是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 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＆lt; ---你可以在这里看到结果

Answer 4

为什么你需要javascript来解决这个问题？只需在容器中给出margin-top。工作示例here

.container {
  margin-top:200px
}

Answer 5

jQuery中没有private class ButtonCell extends TableCell<Record, Boolean> { final Button cellButton = new Button("Delete"); ButtonCell(){ cellButton.setOnAction(new EventHandler<ActionEvent>(){ @Override public void handle(ActionEvent t){ Alert alert = new Alert(Alert.AlertType.CONFIRMATION); alert.setTitle("Confirmation Dialog"); alert.setHeaderText("Delete the entire row?"); Optional<ButtonType> result = alert.showAndWait(); if (result.get() == ButtonType.OK){ Animal currentAnimal = (Animal) ButtonCell.this.getTableView().getItems().get(ButtonCell.this.getIndex()); data.remove(currentAnimal); cellButton.setVisible(false); } } }); } //Display button if the row is not empty @Override protected void updateItem(Boolean t, boolean empty) { super.updateItem(t, empty); if(!empty){ setGraphic(cellButton); } } }函数。文档准备好后，您可以将其放在onload函数中。你可以这样写，而不用改变你的任何风格。

ready

点击此处：https://plnkr.co/edit/hTUg5ANMifkPoc2z8lwW?p=preview

标题的高度到边距顶部

5 个答案: