Question

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

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

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

Working demo

不幸的是，只要我将可滚动div放在一个简单的固定宽度容器中以使其居中在页面上，浏览器就会根据它的内部内容对其进行调整，因此不再可滚动，但是较低的内容因外部div 溢出：隐藏而消失。

Non-working demo

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

谢谢，

帕斯卡

解决方案

我很遗憾不允许回答我自己的问题，这里的解决方案对我有用：

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

如果某人可以解释原因，我将非常感激！

感谢您的帮助！

Answer 1

好的尝试一下，在div＆＃39; scrollableContent ＆＃39;之后，创建一个div并命名为＆＃39; centerAlign ＆＃39;并将此代码添加到您的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>

Answer 2

在容器类中设置

overflow: scroll;

Answer 3

确定尝试这个，在div' scrollableContent '之后，创建一个div并将其名称命名为“ centerAlign ”并将此代码添加到您的css文件中

#centerAlign {
    width:745px;
    margin:0 auto;
}

max-height：复杂布局中的100％div

解决方案

3 个答案: