具有动态内容的响应元素 - 只需一个元素滚动

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>等时滚动页面会产生冲突。

• 我不能在任何元素上使用position: absolute，因为它们都有动态内容。

• 我不能只给<section>一些margin-top等于<nav>的高度，因为它可能会改变。

• 由于<nav>元素中的动态内容，我不能给<section>一个高度，即使是基于流量％的高度，因为我不知道那里有多少空间将有空。

我现在有点想法......任何帮助都非常感激。

Answer 1

方法＃1：Flexbox

  

Flexbox布局（灵活盒）模块（目前是W3C候选人   推荐）旨在提供一种更有效的布局方式，   在容器中的项目之间对齐和分配空间，即使它们是   大小是未知的和/或动态的（因此单词“flex”）。 - 来自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非常好（请参阅 here ），但您需要添加一些特定于浏览器的css才能使其适用于某些旧版浏览器。

3）对于旧版本的Firefox，需要额外的CSS来实现此功能。我已经将它们编辑出了答案，但你可以在这个答案的历史中看到这一切。

方法＃2 CSS表（不是跨浏览器）

因为您需要标题是动态的，所以我最初想到css tables来完成这项工作。

FIDDLE1 FIDDLE2

所以第一行将包含h1和nav，

，第二行将占据窗口的其余部分。

页脚具有固定高度并且位置固定。

...唯一的问题是我认为没有办法做这种跨浏览器。所以据我所知这种方法只适用于Chrome和新歌剧。问题是在表格行中获得滚动条。 （见 this post ）

Answer 2

使用导航和页脚的固定定位，并使用JS设置中心部分的高度。

CSS

nav { position: fixed; top: 0; left: 0; }
footer { position: fixed; bottom: 0; left: 0; }
section { overflow: auto; }

JS（假定jQuery）

$(document).ready(function() {
  function setHeight() {
    var nav_h = $('nav').outerHeight();
    var footer_h = $('footer').outerHeight();
    var window_h = $(window).height();
    $('section').css({ 
      'height': window_h - nav_h - footer_h + 'px',
      'margin-top': nav_h + 'px',
      'margin-bottom': footer_h + 'px'
    });
  }

  $(window).on('resize', function() { setHeight(); });
  setHeight();
});

Answer 3

你正在寻找这样的东西吗？ （对我来说不太清楚）

http://codepen.io/gcyrillus/pen/gHDud http://codepen.io/gcyrillus/full/gHDud
当页面滚动时，它使用javascript重置页眉/页脚中的bg位置。

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 4

这是一个疯狂的答案，但您可以尝试在<section>上方放置一个虚拟元素，并使用CSS将其设置为可见性：隐藏。可见性：隐藏会导致虚拟元素仍占用空间，但您不会看到任何内容。

现在，如果<nav>的内容是动态提供的，您是否可以使用为<nav>提供内容的相同代码为虚拟元素提供内容？这样，您几乎可以设置与<nav>相同大小的边距，但不需要使用额外的javascript来更改高度。

最后，您将<nav>的位置设置为固定，这听起来像是可以解决问题。希望这会有所帮助。

Answer 5

如果使用position：fixed选项的唯一问题是滚动背景图像，请将背景图像放在具有负z-index的绝对定位对象中？

（我会对原来的问题做出评论，而不是作为答案，但我无法弄清楚如何。哈。）

Answer 6

尤达说：只有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' });

}); 

修改

添加溢出：隐藏到BODY以防止'闪烁'垂直滚动条