浮動要素をビューポートの垂直スペースを埋めるように伸ばすにはどうすればよいですか？

ブートストラップ経由でヘルプシステムを構築する。左側のナビゲーションは、メニュー/コンテンツのサイズに関係なく、垂直スペースを埋めるようになっています。浮動要素をビューポートの垂直スペースを埋めるように伸ばすにはどうすればよいですか？

さらに、ページのコンテンツが少ないときにはフッタを下に固定する必要がありますが、コンテンツが増加すると（ビューポートの高さを超えて）押し出される必要があります。

ここにはJSFiddleの設定があります。

基本的なレイアウトは次のとおりです。

<html> 
    <head></head> 
    <body> 
     <header></header> 
     <div id="system"></div> <!-- This is the bar above the nav and content that shows the breadcrumbs --> 
     <main id="content"> 
      <div class="row> 
       <section></section> <!-- Contains the topic content --> 
       <aside></aside>  <!-- Contains the left navigation. Floated left. 
            Needs to fill vertical space above/below it --> 
      </div> 
     </main> 
     <footer></footer>   <!-- This needs to stick to bottom of page when/
            there is little content, and should be pushable/
            by longer (taller than the viewport) content --> 
    </body> 
</html>

出典

2017-03-25 Mike K.

使用jQueryの

スクロール

$(document).ready(function() { 
    if ($("body").height() > $(window).height()) { 
     $('footer').css({ 
      'position':'fixed', 
      'bottom':'0', 
      'width':'100%' 
     }) 

     $('body').css('padding-bottom','20px') 
    } else { 
     $('footer').css({ 
      'position':'static', 
      'bottom':'auto', 
      'width':'100%' 
     }) 
     $('body').css('padding-bottom','0px') 
    } 
});

をフッターに固定addがいる場合

出典

2017-03-25 20:39:00 mylmz10

浮動要素をビューポートの垂直スペースを埋めるように伸ばすにはどうすればよいですか？

答えて

関連する問題