5

我正在尝试在其他 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>高度，即使是基于流体百分比的高度，因为我不知道会有多少可用空间。

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

4

6 回答 6

5

方法一：弹性盒

Flexbox 布局（Flexible Box）模块（目前是 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-tables（不是跨浏览器）

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

小提琴 1 小提琴2

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

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

页脚具有固定的高度和固定的位置。

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

于 2013-06-23T11:00:11.820 回答
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%;
    }

一些小提琴甚至是它应该看起来的屏幕截图，可以帮助我们帮助你

于 2013-06-24T23:33:52.403 回答
3

导航和页脚使用固定定位，并使用 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();
});
于 2013-06-20T20:17:01.453 回答
1

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

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

于 2013-06-28T08:46:19.020 回答
1

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

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

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

于 2013-06-22T22:30:38.187 回答
0

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 以防止“闪烁”垂直滚动条

于 2013-06-30T07:27:27.233 回答