修复了 flexbox 占用空间答案

【问题标题】：Fixed flexbox to take up space修复了 flexbox 占用空间
【发布时间】：2017-03-19 18:52:06
【问题描述】：

我正在尝试找到一种现代解决方案，在页面顶部有一个固定菜单栏（弹性框），下面有一个弹性框。我希望页面与菜单一起滚动以保持静态，并且第二个内容弹性框的内容滚动（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

注意：不是在寻找 top margin hack 解决方案...

【问题讨论】：

标签： javascript jquery html css flexbox

【解决方案1】：

这个问题的答案与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>

【讨论】：