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

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> 一些等于<nav> 高度的margin-top，因为它可能会改变。

• 由于<nav> 元素中的动态内容，我不能给<section> 一个高度，即使是基于流体百分比的高度，因为我不知道会有多少可用空间。

我现在有点想不通......非常感谢任何帮助。

Answer 1

方法 #1：弹性盒

弹性盒布局（Flexible Box）模块（目前是 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:11 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/gHDudhttp://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 将其样式设置为可见性：隐藏。 Visibility: hidden 会导致虚拟元素仍然占用空间，但你不会看到其中的任何内容。

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

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

Answer 5

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

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

Answer 6

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' });

}); 

编辑

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