Question

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

注意：不寻找顶级边缘黑客解决方案......

Answer 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>

固定flexbox占用空间

1 个答案: