html - 動的コンテンツを含むレスポンシブ要素 - 1 つの要素だけをスクロールさせる

Question

他の 2 つの流体要素の真ん中に流体のスクロール可能な要素を作成しようとしています。サイト全体が完全にレスポンシブになるはずです。

私のマークアップは基本的にこれです：

<h1>Title</h1>
<nav>Changeable Menu Items In A List</nav>
<section>
   Lots of items which are changing all the time.
</section>
<footer>Footer</footer>

スクロールしたい唯一の要素は<section>要素です。

• position: fixedページの背景は画像であり、要素を通して見えるようにする必要があるため、他の要素を適切な位置に保つために使用することはできません。<nav>そのため、 etc. を固定したままページをスクロールすると、クラッシュが発生します。

• position: absoluteすべての要素に動的コンテンツがあるため、どの要素にも使用できません。

• の高さに等しい<section>ものを与えることはできません。変化する可能性があるからです。margin-top<nav>

• <nav>要素内の動的なコンテンツのため、<section>使用可能なスペースがどれだけあるか分からないため、流動的な % ベースの高さでさえ、高さを与えることはできません。

私は今、ちょっとアイデアがありません...どんな助けも大歓迎です。

Answer 1

アプローチ #1: フレックスボックス

フレックスボックス レイアウト (フレキシブル ボックス) モジュール (現在は W3C 候補勧告) は、コンテナー内のアイテムのサイズが不明または動的な場合でも、スペースをレイアウト、整列、および分散するためのより効率的な方法を提供することを目的としています。 "フレックス"）。-- css-tricksから

フレックスボックスを使用して、このFIDDLEを思いつきました

マークアップ:

<div class="container">
<div class="header">
    <h1>Title</h1>
    <nav>
    </nav>
</div>
<div class="content">content</div>
<footer>footer</footer>
</div>

関連する CSS:

.content
{
    flex: 1;
    overflow: auto;
}

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header,
.content,
footer {
  width: 100%;
}
.header {
  background: yellow;
}
.content {
  background: pink;
  flex: 1;
  overflow: auto;
}
footer {
  background: gray;
  height: 80px;
}

<div class="container">
  <div class="header">
    <h1>Title</h1>
    <nav>
      <ul>
        <li><a href="#">Btn</a>
        </li>
        <li><a href="#">Btn</a>
        </li>
        <li><a href="#">Btn</a>
        </li>
        <li><a href="#">Btn</a>
        </li>
        <li><a href="#">Btn</a>
        </li>
        <li><a href="#">Btn</a>
        </li>
        <li><a href="#">Btn</a>
        </li>
        <li><a href="#">Btn</a>
        </li>

      </ul>
    </nav>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
    Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
    litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est
    etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi,
    qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

  </div>
  <footer>footer</footer>
</div>

言及するいくつかのポイント：

1) flex:1 (つまり、flex: 1 1 auto) のみをスクロール可能なコンテンツに適用します。他のアイテムは、固定または動的な高さを持つことができます。

2) flexbox のサポートは、最近のブラウザーでは驚くほど優れています (こちらを参照)。ただし、一部の古いブラウザーでこれを機能させるには、ブラウザー固有の css を追加する必要があります。

3) 古いバージョンの Firefox では、これを機能させるために追加の CSS が必要でした。それ以来、回答からそれらを編集しましたが、この回答の履歴ですべてを見ることができます。

アプローチ #2 CSS テーブル (クロスブラウザーではない)

ヘッダーを動的にする必要があるため、最初css tablesはその仕事をすることを考えていました。

フィドル 1 フィドル2

したがって、最初の行には h1 と nav が含まれます。

2 行目はウィンドウの残りの部分を占めます。

フッターの高さと位置は固定されています。

...これに関する唯一の問題は、このクロスブラウザーを実行する方法がないと思うことです。私の知る限り、このアプローチは Chrome と新しいオペラでのみ機能します。問題は、テーブル行内でスクロールバーを取得することです。（この投稿を参照）

Answer 2

このようなものを探していますか？（私にはあまり明確ではありません）

http://codepen.io/gcyrillus/pen/gHDud http://codepen.io/gcyrillus/full/gHDud
ページのスクロール時に javascript を使用してヘッダー/フッターの背景位置をリセットします。

function scrollit() {
if(!window.pageYOffset) {
     var pageScroll = document.body.screeny;  
     }

else {
    var pageScroll = window.pageYOffset;
      }
var mybg= document.body;
  mybg.style.backgroundPosition=" center -"+pageScroll+"px ";


}
window.onload     = scrollit ;
window.onresize   = scrollit;
window.onscroll   = scrollit;

そしてそれが適用されるcss

   body:before, body:after {
      content:'';
      background: inherit  ;
      position:fixed;
      z-index:2;
      width:100%;
      left:0;
    }
    body:before {
      height:120px; 
      top:0;
    }
    body:after {
      bottom:0;
      height:60px;
    }
    body {
      margin:0;
      background:url('http://lorempixel.com/1920/1500/nature/10')  center 0 fixed;
      background-size: 150% 300%;
    }

見た目のフィドルやスクリーンショットでさえ、私たちがあなたを助けるのに役立つかもしれません

Answer 3

position:fixed オプションの使用に関する唯一の問題が背景画像のスクロールである場合、負の z-index を持つ絶対配置オブジェクトに背景画像を配置します。

（私はこれを答えとしてではなく、元の質問へのコメントにしたでしょうが、方法がわかりませんでした.hah。）

Answer 4

Yoda: JavaScript だけが解決できる問題があります。

http://jsfiddle.net/6MCLN/7/

CSS:

body {
    background-color: #ff0000;
    background: -ms-linear-gradient(top left, #d00 0%, #f33 50%, #611 100%);
    background: linear-gradient(top left, #d00 0%, #f33 50%, #611 100%);
    margin: 0;
    overflow: hidden;
}

h1, nav, footer {
    background-color: rgba(40, 40, 40, 0.4);
    margin: 0;
    padding: 10px;
}

section {
    overflow-y: scroll;
    padding: 10px;
}

前述の JavaScript:

$(function () {

    var thereIsNoTry = function () {

        $('section').css({ height:
            $(window).height() - 
            $('h1').height() -        
            $('nav').height() -      
            $('footer').height() -                             
            parseInt($('h1').css('padding-top')) -          
            parseInt($('h1').css('padding-bottom')) -    
            parseInt($('nav').css('padding-top')) -          
            parseInt($('nav').css('padding-bottom')) -  
            parseInt($('footer').css('padding-top')) -          
            parseInt($('footer').css('padding-bottom'))  -
            parseInt($('section').css('padding-top')) -          
            parseInt($('section').css('padding-bottom'))
        });

    };

    $(window).resize(thereIsNoTry);

    thereIsNoTry();

});

編集

この種の目的で JavaScript を使用する場合の大きな注意点は、ウィンドウのサイズを変更せずにヘッダーの DOM が変更された場合、「セクション」のサイズを手動で変更する必要があることです。ただし、次の追加の JavaScript を使用すると、ほとんどのシナリオで最新の状態に保つことができます。

$(function () {

    var thereIsNoTry = function () {

        $('section').css({ height:
            $(window).height() - 
            $('h1').height() -        
            $('nav').height() -      
            $('footer').height() -                             
            parseInt($('h1').css('padding-top')) -          
            parseInt($('h1').css('padding-bottom')) -    
            parseInt($('nav').css('padding-top')) -          
            parseInt($('nav').css('padding-bottom')) -  
            parseInt($('footer').css('padding-top')) -          
            parseInt($('footer').css('padding-bottom'))  -
            parseInt($('section').css('padding-top')) -          
            parseInt($('section').css('padding-bottom'))
        });

    };

    $(window).resize(thereIsNoTry);

    thereIsNoTry();

    //In case you're updating the DOM
    $(document).ajaxSuccess(thereIsNoTry);

    var oldAnimate = jQuery.fn.animate;

    //In case the header can be animated
    jQuery.fn.animate = function (properties, duration, 
                                  animation, easing) {

        if (arguments.length == 4) {
            return oldAnimate.call(this, properties, 
                                   duration, animation, easing);
        }

        if (arguments.length == 3) {
            return oldAnimate.call(this, properties,
                                   duration, animation);
        }

        if (arguments.length == 2 && typeof duration === 'object') {

            var options = {
                progress: function (animation, progress, remainingMs) {

                    if (duration.progress) {
                        duration.progress.call(this, animation, 
                                               progress, remainingMs);
                    }

                    thereIsNoTry();

                }
            }

            var option = $.extend({}, duration, options);

            return oldAnimate.call(this, properties, option);

        }

        if (arguments.length == 2) {
            return oldAnimate.call(this, properties, {
                duration: duration,
                progress: thereIsNoTry
            });
        }

        return oldAnimate.call(this, properties);

    };

    $('nav').animate({ height: '100px' }, { duration: 'slow' });

}); 

編集

垂直スクロールバーの「ちらつき」を防ぐため、overflow: hidden を BODY に追加