リサイズ可能なコンテナの固定ヘッダー/フッター

サイズ変更可能なコンテナの上部と下部にヘッダーとフッターを固定しようとしています。ただし、コンテナのサイズを変更すると、フッターは固定されたままで、コンテナで応答しません。ここでリサイズ可能なコンテナの固定ヘッダー/フッター

は私のコードです：

<script> 
     $(function() { 
     $("#resizable").resizable(); 
     }); 
    </script> 

    <style type="text/css"> 
     .container { 
      height: 500px; 
      width: 500px; 
      border: 1px solid black; 
     } 

     #sticky-header, #sticky-footer { 
      position: relative; 
      min-height: 100px!important; 
      width: 100%; 
      background-color: black; 
     } 

     #sticky-header { 
      top: 0; 
     } 

     #main { 
      min-height: 300px!important; 
      width: 100%; 
      overflow: scroll; 
     } 

     #sticky-footer { 
      bottom: 0; 
     } 
    </style> 
</head> 
<body> 

    <div class="container" id="resizable"> 
     <div id="sticky-header"></div> 
     <div id="main"></div> 
     <div id="sticky-footer"></div> 
    </div><!-- /end container --> 

</body>

出典

2016-06-30 code_Monkey

ないあなたが期待するのかわから、それ自身のCSSはflexとresize経由でこれを行う必要があります：demoまたはの

以下のスニペット

.container { 
 
    margin: auto; 
 
    height: 200px; 
 
    width: 500px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; 
 
    resize: both; 
 
    overflow: auto; 
 
    /* to trigger resize handle */ 
 
} 
 
#sticky-header, 
 
#sticky-footer { 
 
    text-align: center; 
 
    color: white; 
 
    background-color: black; 
 
} 
 
#main { 
 
    flex: 1; 
 
    overflow: auto; 
 
}

<div class="container" id="resizable"> 
 
    <div id="sticky-header">height from content</div> 
 
    <div id="main">scroll when needed</div> 
 
    <div id="sticky-footer">height from content</div> 
 
</div>

素晴らしいですより多くのコンテンツ

.container { 
 
    margin: auto; 
 
    height: 200px; 
 
    width: 500px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; 
 
    resize: both; 
 
    overflow: auto; 
 
} 
 
#sticky-header, 
 
#sticky-footer , nav a{ 
 
    color: white; 
 
    background-color: black; 
 
    text-align:center; 
 
} 
 
#main { 
 
    flex: 1; 
 
    overflow: auto; 
 
}

<div class="container" id="resizable"> 
 
    <div id="sticky-header"> 
 
    <h1>HTML Ipsum Presents</h1> 
 
    </div> 
 
    <div id="main"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus 
 
     lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 
 
     facilisis luctus, metus</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus 
 
     lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 
 
     facilisis luctus, metus</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus 
 
     lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 
 
     facilisis luctus, metus</p> 
 
    </div> 
 
    <div id="sticky-footer"> 
 
    <nav> 
 
     <a href="#">Home</a> 
 
     <a href="#">About</a> 
 
     <a href="#">Clients</a> 
 
     <a href="#">Contact Us</a> 
 
    </nav> 
 
    </div> 
 
</div>

出典

2016-06-30 19:25:56

と同じ。 resizeを使わないでflexを使う：jQuery UIを使って.resizable（）をインクルードすることは、私が必要としていたこととまったく同じでした！ありがとうございました！ –

リサイズ可能なコンテナの固定ヘッダー/フッター

答えて

関連する問題