スペースを取るようにフレックスボックスを修正しました

私は、フレックスボックスを下にしてページの上部に固定メニューバー（フレックスボックス）を置くという現代的な解決策を見つけようとしています。私はページをスクロール（fixBox）するには、静的にするためにメニューをスクロールし、2番目のコンテンツの内容をフレックスボックスにしたい。スペースを取るようにフレックスボックスを修正しました

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

注：しかし、私は、私は次のコードを持っている

....それはその下にその下に表示されないようにfillBox div要素との相対的だように行動するために、固定メニューが欲しいです：トップマージンのハックソリューションを探していません...

出典

2017-03-19 johhny B

この質問に対する答えは、フレックスボックスとは関係がありません。固定ポジションと関係があります。

position: fixedは、DOM要素をドキュメントの流れから完全に取り除くため、他のDOM要素は、占有する領域を無視します。 1つの（いくつかの可能な）アクションのコースは、#topContainerの高さに等しい#fillBoxに上部パディングを追加することです。#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が動的高さを持っている場合は、動的に#fillBoxの上部パディングを設定するためにサイズを変更/負荷にJSを使用する必要があります。

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

スペースを取るようにフレックスボックスを修正しました

答えて

関連する問題