Html 最大高度：复杂布局内的100%div_Html_Css

Html 最大高度：复杂布局内的100%div

html css

Html 最大高度：复杂布局内的100%div,html,css,Html,Css,我有一个奇怪的CSS问题，我无法理解。我的页面布局相当复杂，页眉和页脚固定，内容区域灵活现在在这个内容区域中，我想创建可滚动的div，默认情况下，它使用外部容器的完整高度，但不超过这个高度一切正常，滚动div是页眉和页脚之间的唯一元素然而，不幸的是，当我将可滚动div放在一个简单的固定宽度容器中以使其在页面上居中时，浏览器会根据其内部内容调整其大小，因此不再可滚动，但较低的内容会因为外部div的溢出而消失：隐藏非常感谢您的帮助，我已经花了最后几天的时间试图解决这个问题谢谢, 帕斯

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

现在在这个内容区域中，我想创建可滚动的div，默认情况下，它使用外部容器的完整高度，但不超过这个高度

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

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

非常感谢您的帮助，我已经花了最后几天的时间试图解决这个问题

谢谢,

帕斯卡

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

我通过给

#容器一个高度的100%来解决这个问题。
结果可以在这里看到：www.hacksrus.net/files/demo_working.html（我也不允许发布另一个超链接；-））
如果有人能解释原因，我将不胜感激
谢谢你的帮助
 在容器类中设置
overflow: scroll;

在容器类中设置
overflow: scroll;

好的，试试这个，在div“scrollableContent”之后，创建一个div并命名为“centerAlign”，然后将此代码添加到css文件中
#centerAlign {
    width:745px;
    margin:0 auto;
}

好的，试试这个，在div“scrollableContent”之后，创建一个div并命名为“centerAlign”，然后将此代码添加到css文件中
#centerAlign {
    width:745px;
    margin:0 auto;
}

好的，试试这个，在div“scrollableContent”之后，创建一个div并命名为“centerAlign”，然后将此代码添加到css文件中
#centerAlign {
    width:745px;
    margin:0 auto;
}

好的，这是我测试过的代码
<!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>


试验
* { 
宽度：100%；
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体大小：20px；
溢出：隐藏；
}
标题{
位置：绝对位置；
高度：100px；
边框：1px实心#c00；
}
#内容{
位置：绝对位置；
顶部：100px；
底部：100px；
边框：1px实心#c00；
最大高度：100%；
溢出：隐藏；
}
#可滚动内容{
最大高度：100%；
溢出：自动；
}
页脚{
位置：绝对位置；
底部：0；
高度：100px；
边框：1px实心#c00；
}
#中心对齐{
宽度：745px；
保证金：0自动；
背景色：#999；
}
标题
开始
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
结束
页脚
确定尝试此操作，在div“scrollableContent”之后创建一个div并命名为“centerAlign”，然后将此代码添加到css文件中
#centerAlign {
    width:745px;
    margin:0 auto;
}

好的，这是我测试过的代码
<!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>


试验
* { 
宽度：100%；
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体大小：20px；
溢出：隐藏；
}
标题{
位置：绝对位置；
高度：100px；
边框：1px实心#c00；
}
#内容{
位置：绝对位置；
顶部：100px；
底部：100px；
边框：1px实心#c00；
最大高度：100%；
溢出：隐藏；
}
#可滚动内容{
最大高度：100%；
溢出：自动；
}
页脚{
位置：绝对位置；
底部：0；
高度：100px；
边框：1px实心#c00；
}
#中心对齐{
宽度：745px；
保证金：0自动；
背景色：#999；
}
标题
开始
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
福
结束
页脚
我不允许在原始问题中发布这些内容，因此这里有一些屏幕截图用于说明：为什么您需要#容器
和#可滚动内容
？设置溢出：自动
上的code>似乎可以完成这项工作。看起来我和我特别需要内部div
#scrollableContent
可以滚动（或者至少具有适当的高度），因为我将在它旁边构建一个自定义滚动条。这可能是通过在容器上使用溢出：auto
和在我的自定义滚动条上使用位置：fixed
来实现的，但是我更愿意理解这个解决方案的问题。我不允许在原始问题中发布这些，所以这里有一些scre