时间戳

首页 > 解决方案 > 固定导航栏在大型显示器上延伸太远

html - 固定导航栏在大型显示器上延伸太远

问题描述

我创建了一个网站，其屏幕右侧有一个固定的水平导航栏，左侧有徽标。一切正常，直到显示器延伸超过 1240 像素宽。此时，与其余内容（最大宽度为 1024 像素）相比，导航栏向右延伸太远。

现在，我确切地知道它为什么这样做，我已经通过使用对其进行了编码right: 0，但是我仍然不希望它超出我将其余内容设置为的 1024px 并且我不知道如何解决问题。我尝试设置 amax-width并且div-element它什么也没做，我尝试使用max-width: 1024pxand创建其他元素position: relative（正如我建议的这个选项），但没有运气。

我能找到的唯一解决问题的方法是对每个分辨率进行媒体查询并使用边距，right: 0尽管这似乎是一个不必要的冗长和复杂的解决方案。无论如何，我也不是开发人员，这是我第一次编码，所以我的知识非常有限。

main,
header {
    max-width: 1024px;
    margin: auto;
}

@media screen and (min-width: 780px) {
    .navbar {
        background-color: #ffffffde;
        position: fixed;
        padding: 3px;
        max-width: 1024px;
        z-index: 50;
        right: 0;
        margin-right: 2rem;
    }
    .navbar a {
        float: left;
        display: block;
        color: #000000;
        text-align: center;
        padding: 8px;
        text-decoration: none;
        font-size: 17px;
        top: 15px;
    }
    .navbar .icon {
        display: none;
    }
}

.dropdown {
    float: left;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: black;
    padding: 8px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9d3;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 50;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: rgba(224, 222, 222, 0.705);
}

.dropdown-content a:hover {
    background-color: rgba(224, 222, 222, 0.705);
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}
<header>
   <a href="/en/index.html">
      <div class="logo">Logo</div>
   </a>

   <div class="navbar" id="myNavbar">

      <a href="#about">About</a>

      <div class="dropdown">
         <button class="dropbtn">Services 
            <i class="fa fa-caret-down"></i>
         </button>
         <div class="dropdown-content">
            <a href="#services and solutions">Services and Solutions</a>
            <a href="#training">Training and Workshops</a>
         </div>
      </div>

      <a href="#partners">Partners</a>
      <a href="#contact">Contact</a>

      <a href="/sv/index.html" style="color: rgb(138, 138, 138)">Svenska</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
      </a>

   </div>
</header>

（因为这些工作，我已经排除了CSS平板电脑和移动设备以及 JS，因为这与问题无关并且不希望它在帖子中占用不必要的空间）

如果有人对我的问题有任何可能的解决方案，我会尝试大多数事情，因为我已经在高处和低处搜索了我的问题的答案。

标签： htmlcssmedia-queriesnavigationbar

解决方案

固定位置的元素从正常的 DOM 流中移除。因此，固定位置的元素总是相对于视口而忽略页面上的所有其他内容。

但是，由于您知道<main>内容宽度为 1024px，您可以使用calc()来调整right固定导航栏的位置...

主要内容左侧/右侧的空白宽度为：100%（页面宽度）减去 1024px（主要内容宽度）分成两半（左侧和右侧）。因此，这将为您提供主要内容的正确边缘。

right: calc((100% - 1024px)/2);

   .navbar {
        background-color: #ffffff;
        position: fixed;
        padding: 3px;
        max-width: 1024px;
        z-index: 50;
        right: calc((100% - 1024px)/2);
        margin-right: 2rem;
   }

代码

推荐阅读