1

我有一个奇怪的 CSS 问题，我无法理解。我的页面布局相当复杂，具有固定的页眉和页脚以及灵活的内容区域。

现在在这个内容区域内，我想创建可滚动的 div，默认情况下使用外部容器的全高，但不会更多。

一切正常，可滚动 div 是页眉和页脚之间的唯一元素。

工作演示

然而不幸的是，一旦我将可滚动的 div 放在一个简单的固定宽度容器中以使其在页面上居中，浏览器就会根据其内部内容调整它的大小，因此不再可滚动，但由于外部 div 的溢出：隐藏。

非工作演示

非常感谢任何帮助，我真的花了最后几天试图解决这个问题。

谢谢，

帕斯卡

解决方案

不幸的是，我不允许回答我自己的问题，以下是对我有用的解决方案：

我能够通过给出#containeraheight来解决问题100%。结果可以在这里看到：www.hacksrus.net/files/demo_working.html（我也不允许发布另一个超链接.. ;-)）

如果有人能解释原因，我将不胜感激！

谢谢您的帮助！

4

3 回答 3

1

好的，试试这个，在 div ' scrollableContent ' 之后，创建一个 div 并命名为 ' centerAlign ' 并将此代码添加到您的 css 文件中

好的，这是你的代码，我测试过的。

<!doctype html>
<html>
  <head>
    <title>Test</title>
    <style>
      * { 
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-size: 20px;
        overflow: hidden;
      }

      header {
        position: absolute;
        height: 100px;
        border: 1px solid #c00;
      }

      #content {
        position: absolute;
        top: 100px;
        bottom: 100px;
        border: 1px solid #c00;
        max-height: 100%;
        overflow: hidden;
      }

      #scrollableContent {
        max-height: 100%;
        overflow: auto;
      }

      footer {
        position: absolute;
        bottom: 0;
        height: 100px;
        border: 1px solid #c00;
      }
      #centerAlign {
            width:745px;
            margin:0 auto;
            background-color:#999;
      }
    </style>
  </head>

  <body>
    <header>header</header>
    <div id="content">
      <div id="scrollableContent">
        <div id='centerAlign'>
        <div>
          <p>BEGIN</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>END</p>
        </div>
        </div>
      </div>
    </div>
    <footer>footer</footer>
  </body>
</html>
于 2013-01-17T08:37:55.553 回答
0

好的，试试这个，在 div ' scrollableContent ' 之后，创建一个 div 并命名为 ' centerAlign ' 并将此代码添加到您的 css 文件中

#centerAlign {
    width:745px;
    margin:0 auto;
}
于 2013-01-17T08:26:09.133 回答
0

在容器类中设置

overflow: scroll;
于 2013-01-17T08:25:31.850 回答