固定柔性盒占用空间

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

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

来源

2017-03-19 johhny B

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

来源

2017-03-19 10:42:42 Adam

固定柔性盒占用空间

回答

相关问题