javascript - 固定 flexbox 占用空间-6ren

javascript - 固定 flexbox 占用空间

转载作者：太空宇宙更新时间：2023-11-04 01:54:15

25

4

我试图找到一种现代解决方案，在页面顶部有一个固定的菜单栏( flexbox )，在下面有一个 flexbox 。我希望页面滚动时菜单保持静态，第二个内容 flexbox 的内容滚动 (fixBox)。但是我希望固定菜单的行为就像它与 fillBox div 的相对关系一样出现在它下面而不是它下面....

我有以下代码:

<!DOCTYPE HTML>
<html>
   <head>
      <style>
      body {
         padding:0;
         margin:0;
      }
      #logo {
         width:170px;
         border: 1px solid black;
      }
      #menuStrip {
         position:relative;
         width:95%;
         height:100%;
         background-color:#f0f0f0;
         border: 1px solid black;
      }
      #topContainer {
         position:fixed;
         display: flex;
         justify-content: center;
         align-items: center;
         border: 1px solid black;
         width:100%;
         height:50px;
      }
      #fillBox {
         display:flex;
         justify-content: center;
         align-items: center;
         border: 1px solid black;
      }

      #fill1 {
         width:100%;
         height:2000px;
         background-color:#a2b565;
      }
      #menuObj {
         position:absolute;
         right:0;
         width:40px;
         height:30px;
         border:1px solid; black;
         background-color:red;

      }
      </style>
   </head>
   <body>
      <div id="topContainer">
         <div id="menuStrip"><div id="menuObj"> </div></div>
      </div>
      <div id="fillBox">
         <div id="fill1"> <p> hello </p></div>
      </div>
   </body>
</html>

fiddle

注意:不是在寻找最高利润黑客解决方案......

最佳答案

这个问题的答案与flexbox无关，它与固定定位有关。

position: fixed 将 DOM 元素完全脱离文档流，因此其他 DOM 元素将忽略它们占用的空间。一个(几个可能的)行动方案是向 #fillBox 添加一个顶部填充，它等于 #topContainer 的高度 - 如果 #topContainer 将始终具有固定的高度。

      body {
         padding:0;
         margin:0;
      }
      #logo {
         width:170px;
         border: 1px solid black;
      }
      #menuStrip {
         position:relative;
         width:95%;
         height:100%;
         background-color:#f0f0f0;
         border: 1px solid black;
      }
      #topContainer {
         position:fixed;
         display: flex;
         justify-content: center;
         align-items: center;
         border: 1px solid black;
         width:100%;
         height:50px;
      }
      #fillBox {
         padding-top: 50px;
         display:flex;
         justify-content: center;
         align-items: center;
         border: 1px solid black;
      }
         
      #fill1 {
         width:100%;
         height:2000px;
         background-color:#a2b565;
      }
      #menuObj {
         position:absolute;
         right:0;
         width:40px;
         height:30px;
         border:1px solid; black;
         background-color:red;
         
      }

      <div id="topContainer">
         <div id="menuStrip"><div id="menuObj"> </div></div>
      </div>
      <div id="fillBox">
         <div id="fill1"> <p> hello </p></div>
      </div>

如果 #topContainer 具有动态高度，那么您需要在加载/调整大小时使用 JS 来动态设置 #fillBox 的顶部填充。

    var $topContainer = $('#topContainer');
    var $fillBox = $('#fillBox');

    var updateTopBar = function() {
     var dynamicHeight = $topContainer.height();
     $fillBox.css({paddingTop:dynamicHeight+'px'});


    };

    $(window).on('load',updateTopBar).on('resize',updateTopBar);

    body {
             padding:0;
             margin:0;
          }
          #logo {
             width:170px;
             border: 1px solid black;
          }
          #menuStrip {
             position:relative;
             width:95%;
             height:100%;
             background-color:#f0f0f0;
             border: 1px solid black;
          }
          #topContainer {
             position:fixed;
             display: flex;
             justify-content: center;
             align-items: center;
             border: 1px solid black;
             width:100%;
             height:50px;
          }
          

          #fillBox {
             display:flex;
             justify-content: center;
             align-items: center;
             border: 1px solid black;
          }
             
          #fill1 {
             width:100%;
             height:2000px;
             background-color:#a2b565;
          }
          #menuObj {
             position:absolute;
             right:0;
             width:40px;
             height:30px;
             border:1px solid; black;
             background-color:red;
             
          }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="topContainer">
       <div id="menuStrip"><div id="menuObj"> </div></div>
    </div>
    <div id="fillBox">
       <div id="fill1"> <p> hello </p></div>
    </div>

关于javascript - 固定 flexbox 占用空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42885366/

25

4

0

文章推荐： python - 如何在此 pandas 数据框上正确使用 pivot？

文章推荐： python - 使用中间层作为输入和输出的 keras 模型

文章推荐： python - 为什么我的带线程的 numpy 代码不是并行的？

文章推荐： jquery - 表格在 Firefox 中的 jQuery.toggle() 之后留下边距

xcode自动布局隐藏 View 占用空间
我一整天都在努力完成这项工作，但是但没有成功。我尝试设置按钮顶部约束(垂直间距)相对于tableView。但是当我从我的快速代码中隐藏表格 View 时仍然占用空间。我想要实现的是，当我隐藏表格
xcode自动布局隐藏 View 占用空间
我一整天都在努力完成这项工作，但是但没有成功。我尝试设置按钮顶部约束(垂直间距)相对于tableView。但是当我从我的快速代码中隐藏表格 View 时仍然占用空间。我想要实现的是，当我隐藏表格
javascript - 如何阻止所谓不可见的 javascript 占用空间？
我不太擅长编程，但我做了一些研究，发现了这一小串 javascript，可以让我们在点击每个 javascript 链接按钮时立即在页面上播放声音: 问题是，当我放入其中几行来定义不同的声音时，它们
html - 响应式
占用空间
我该怎么做，让 .tabs__item2 占据右边的剩余空间？我希望无论屏幕大小如何，.tabs__item2 都会填充剩余空间，一直到它的大蓝色 div 的边缘。可能类似于 width:100
javascript - 固定 flexbox 占用空间
我试图找到一种现代解决方案，在页面顶部有一个固定的菜单栏( flexbox )，在下面有一个 flexbox 。我希望页面滚动时菜单保持静态，第二个内容 flexbox 的内容滚动 (fixBox)。
html - 如何阻止 div 占用空间？
我正在用 ajax 进度条和其他东西做一些事情...... 基本上我有一个隐藏的 div，里面写着“正在加载”，在它下面有一个可见的 div，里面有我的内容。加载时，它淡出内容 div，使隐藏的 d
css - IE7 清空
占用空间
我有五个 div，每个都共享一个 ad_tile 类。该类在 div 的左侧和右侧提供 3 像素的填充和 1 像素的边框，并为内容提供清晰的修复。如果这些 div 中的一个或多个为空，则这些 div
css - 怎么让这个固定的header div 有绝对的菜单和固定的logo 占用空间？
有这个固定的 header元素( block 元素)，带有 absolute定位nav带有菜单的元素，和另一个固定元素作为标志: About Contac
android - ConstraintLayout GONE View 占用空间
我有一个 ViewHolder，标题位于顶部，该标题在特定情况下变得可见。在大多数其他情况下， header 设置为 GONE。问题是，当 header 设置为 GONE 时，它的高度仍会计算，而其他
jquery - 如何强制隐藏+空的
占用空间？
请注意，我的问题不是关于如何用 . 填充剩余空间背景:我正在尝试将 jQuery sortable 与一系列水平布局的 , 结合使用与类 "column" .column { display:i
html - 优化 CSS - 如何正确减少 CSS 占用空间
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improv
c# - Xamarin Forms IsVisible false 占用空间
我有一个带有模板切换器的 ListView ，并且我希望在特定项目上隐藏它，所以我使用了一个隐藏模板。我将 View (或 StackLayout)设置为 isVisible=false 和 Heig
amazon-ecs - 使用 CodePipeline 时如何控制 ECS 部署的内存和 CPU 占用空间
TL;DR:部署面向 ECS 的 CodePipeline 后，如何更改内存和 CPU 要求(或指定 ECS 任务定义的任何细节)？我已经创建了一个部署 ECS 容器的 CodePipeline。为
hadoop - HDFS 占用空间 : "hdfs dfs -du/" vs "hdfs dfsadmin -report"
哪种工具最适合测量 HDFS 空间消耗？当我总结“hdfs dfs -du/”的输出时，与“hdfs dfsadmin -report”(“DFS Used”行)相比，我总是消耗更少的空间。是否有
java - Cassandra = 内存/编码- key 占用空间(哈希/字节[]=>十六进制=>UTF16=>字节[])
我试图理解使用 MD5 哈希作为 Cassandra key 在“内存/存储消耗”方面的含义: 我的内容(在 Java 中)的 MD5 哈希 = byte[] 长 16 个字节。 (16 字节来自维基

首页

博学

6Ren·AI

商城

javascript - 固定 flexbox 占用空间