如何将div定位在固定位置div下方？ [关闭]

Question

我有一个固定位置的导航栏。现在我的其余内容都放在此导航栏下方，因为该栏的位置是固定的。如何将其余内容放在固定导航栏下方？

https://gyazo.com/dad3fc7fc35e65a4ad73fd0da2c6ffa7正如您所看到的，我的部分内容消失在我的固定导航栏下方。

<div class="header" id="header">

    <div class="menu1" id="menu1">

        <div class="name">Jan de Sterke</div>

        <div class="menu_item_holder">
            <div class="menu_item"><a href="index.php">Home</a></div>
            <div class="menu_item"><a href="sco.php">SCO</a></div>
            <div class="menu_item"><a href="uex.php">UEX</a></div>
            <div class="menu_item"><a href="dev.php">DEV</a></div>
        </div>

    </div>
</div>

CSS

.header {
    width: 100%;
    background: #1C2023;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    bottom: 0;
    padding: 2.5% 0 2.5% 0;
    transition: all 0.5s;
}

导航栏下方的de div是彩色线条。

此行的CSS：

    .headerpic {
        width: 100%;
        height: 5px;
        background: #fc4a1a;
    }

我曾尝试使用以下JavaScript代码来解决问题，但它无法正常工作。

    let heightvalue = document.getElementById('header').offsetHeight;
    let content = document.getElementById('headerpic');
    content.style.marginTop = heightvalue + "px";

---

我的JavaScript代码实际上正在运行。

let heightvalue = document.getElementById('header').offsetHeight;
let content = document.getElementById('headerpic');
content.style.marginTop = heightvalue + "px";

我不知道为什么之前没有工作。下一个问题是每次调整窗口大小时都需要重新计算此margin-top值。目前，它计算一个值并在加载开始时将其设置为margin-top。当我调整窗口大小时，此值保持不变，这会导致出现空格。

编辑：这个问题可以通过重新运行窗口调整大小事件的代码来解决。 （JavaScript窗口调整大小事件）我的页面的代码是：

window.onresize = function(event) {
    let heightvalue = document.getElementById('header').offsetHeight;
    let content = document.getElementById('headerpic');
    content.style.marginTop = heightvalue + "px";
};

Answer 1

使用CSS flexbox可能有助于避免使用JavaScript，但如果没有您使用的实际内容则很难进行建模。

html {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  flex-shrink: 0;
}

.header {
  color: #fff;
  flex-shrink: 0;
  width: 100%;
  background: #1C2023;
  padding: 5px 0 5px 0;
  transition: all 0.5s;
  border-bottom: 5px solid #fc4a1a;
}

.content {
  flex-grow: 1;
  overflow-y: auto;
}

<div class="header">
  HEADER
</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id commodo neque, ac suscipit lorem. Pellentesque quis elit eget ipsum mollis finibus in eget enim. Maecenas dictum ipsum metus, quis consequat erat dictum vitae. Nam commodo mi a tempus
    vehicula. Praesent sit amet dignissim tellus. In ornare mi quis neque luctus tempor. Sed eleifend massa magna, semper pharetra odio tempor nec. Nam cursus pharetra condimentum. Etiam gravida tortor sit amet risus commodo ultrices. Integer accumsan
    velit et velit tempor tempus. Nam ornare consequat lorem, vel vulputate massa lobortis rhoncus. Vivamus placerat augue sed egestas porttitor.</p>

  <p>Integer tincidunt cursus est, at ultricies enim. Ut tempor eleifend sapien, in bibendum nisl rutrum a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat magna justo, at euismod turpis porta et. Curabitur lobortis efficitur
    erat eu consectetur. Sed faucibus tincidunt malesuada. Integer ut lectus odio. Etiam venenatis purus eget mauris laoreet maximus. Integer volutpat, felis sit amet iaculis vestibulum, tellus enim scelerisque odio, sed dapibus diam ante ut justo. Donec
    ac scelerisque purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat porta pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

  <p>Fusce facilisis nisl condimentum, gravida odio blandit, rhoncus quam. Etiam eu est tincidunt, volutpat neque quis, consequat mi. Aliquam erat volutpat. Nam varius leo non felis sollicitudin, ac aliquam tellus euismod. Donec mollis luctus ante ut tincidunt.
    Cras purus enim, vehicula eget placerat feugiat, tempus non lorem. Sed vestibulum purus eget leo dictum lobortis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id commodo neque, ac suscipit lorem. Pellentesque quis elit eget ipsum mollis finibus in eget enim. Maecenas dictum ipsum metus, quis consequat erat dictum vitae. Nam commodo mi a tempus
    vehicula. Praesent sit amet dignissim tellus. In ornare mi quis neque luctus tempor. Sed eleifend massa magna, semper pharetra odio tempor nec. Nam cursus pharetra condimentum. Etiam gravida tortor sit amet risus commodo ultrices. Integer accumsan
    velit et velit tempor tempus. Nam ornare consequat lorem, vel vulputate massa lobortis rhoncus. Vivamus placerat augue sed egestas porttitor.</p>

  <p>Integer tincidunt cursus est, at ultricies enim. Ut tempor eleifend sapien, in bibendum nisl rutrum a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat magna justo, at euismod turpis porta et. Curabitur lobortis efficitur
    erat eu consectetur. Sed faucibus tincidunt malesuada. Integer ut lectus odio. Etiam venenatis purus eget mauris laoreet maximus. Integer volutpat, felis sit amet iaculis vestibulum, tellus enim scelerisque odio, sed dapibus diam ante ut justo. Donec
    ac scelerisque purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat porta pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

  <p>Fusce facilisis nisl condimentum, gravida odio blandit, rhoncus quam. Etiam eu est tincidunt, volutpat neque quis, consequat mi. Aliquam erat volutpat. Nam varius leo non felis sollicitudin, ac aliquam tellus euismod. Donec mollis luctus ante ut tincidunt.
    Cras purus enim, vehicula eget placerat feugiat, tempus non lorem. Sed vestibulum purus eget leo dictum lobortis.</p>
</div>

编辑：删除了额外的div和样式的主体以使用flexbox布局。调整以使标题div固定。

Answer 2

具有position: fixed的元素将从文档流中移除，就像绝对定位的元素一样。实际上它们的行为几乎相同，只有固定定位的元素总是相对于文档，而不是任何特定的父元素，并且不受滚动的影响。

我的建议是将margin-top设置为内容，以便顶部菜单不会覆盖它。您可以使用CSS执行此操作，如下所示：

#navBar {
    height: 40px;
    position: fixed;
    width: 100%;
    top:0
}
#content{
    margin: 40px auto 0;
    width: 100%;
}

使用一点Javascript更新了变量导航栏高度的解决方案：

CSS

#navBar {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

使用Javascript

$(document).ready(function() {
    var contentPlacement = $('#navBar').position().top + $('#navBar').height();
    $('#content').css('margin-top',contentPlacement);
});