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";

我不知道为什么以前不起作用。下一个问题是，每次调整窗口大小时都需要重新计算该边距最高值。当前，它会计算一个值，并将其设置为加载开始时的顶部空白。当我调整窗口大小时，该值保留在那里，这将导致出现空白。

编辑：可以通过重新运行窗口调整大小事件上的代码来解决此问题。（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);
});

如何将div定位在固定位置div下方？

2 个答案: