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

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

方法一:Flexbox

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommandation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). -- from css-tricks

所以使用 flex box 我想出了这个 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 )