3

在我正在布局的页面上，有一堆 div 相互塞入。HTML 代码如下所示：

<div id="overlay">
<div id="main_section">
  <div class="left">yadda yadda left sidebar</div>
  <div class="middle">
    <div id="header">yadda yadda header</div>
    <div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div>
  </div>
  <div class="right">yadda yadda right sidebar</div>
  <div class="clear"></div>
</div>
</div>

主容器是覆盖层，它使用固定位置，如下所示：

#overlay {
    position: fixed;
    width: 100%; height: 90%;
    top: 0px; left: 0px;
    background-color: rgba(255,255,255,0.5);
}

（我将具有不同不透明度级别的多个背景分层，这就是为什么有 main_section、overlay 等）

现在，所有的孩子都使用相对定位，效果相当好。问题出现在#main_content 中。#main_section 和 .middle 都具有高度：100%，并且正如预期的那样，它们一直下降到 #overlay 的底部。现在，这是#main_content：

#main_content {
    position: relative;
    height: 100%;
    width: 70%;
    overflow-y: auto;
    text-align: right;
}

这不像我想要的那样工作，因为由于图像大小，这个东西一直延伸到页面的底部而不是#overlay的底部。我试过溢出-y：滚动和高度：继承，我试过最大高度：100%，我把头发扯掉了。Stackoverflow 是我心脏病发作前的最后希望！

4

2 回答 2

0

我更改并添加了一些属性，因为没有提供完整的源代码（颜色仅用于识别相关块）。在我看来，错误一定是在你的 CSS 中的其他地方，因为下面的代码对我来说很好。

<!DOCTYPE html>
<html>
<head>
<style>
    #overlay {
        position: fixed;
        width: 100%; 
        height: 90%;
        top: 0px;
        left: 0px;
        background-color: blue;
        border: 2px solid green;
    }
    #main_section {
        width: 100%;
        height: 100%;
        background: yellow;
    }
    .middle {
        height: 100%;
        width: 100%;
        background: lavender;
        position: relative;
    }
    #main_content {
        position: relative;
        height: 100%;
        width: 70%;
        text-align: right;
        overflow-y: auto;
        background-color: red;
    }
    img {
        width: 700px;
        height: 2000px;
        background-color: white;
        border: 1px solid black;
    }
  </style>
</head>
<body>
<div id="overlay">
<div id="main_section">
      <div class="left"></div>
      <div class="middle">
            <div id="header"></div>
            <div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div>
      </div>
      <div class="right"></div>
      <div class="clear"></div>
</div>

我遇到与您相同的问题的唯一时间是我设置这些#main_content {position:fixed;}或.middle {position:fixed;}. 你确定#main_content还是.middle没有继承固定位置？或者也许是一个未被注意到的类添加了该属性？

于 2013-03-20T01:51:52.927 回答
0

我发现自己也有同样的问题。

SO上有非常相似的问题的答案。但我发现的只是在整个页面/正文上工作或在容器上具有固定高度。有些使用浮动和定位（绝对或相对在这里并不重要）。然而，整体的基调是使用display元素，我认为这是最优雅和最实用的。

下面是我的解决方案。你可以把它放在任何容器中。它将完全适应容器的高度和宽度，不会溢出。正如你所看到的，它只是结合了display: inline-block父母和display: table孩子。

请注意，如果您添加一个display: table-caption溢出将再次发生（如果您知道原因，请发表评论）。

<div id="#place_me_anywhere"
     style="display: inline-block;width: 100%;height: 100%;">
    <div style="display: table;height: 100%;width: 100%;">  
        <!--<div style="display: table-caption;">
            Height overflow will occur
        </div>-->
        <div style="display: table-row;">
            <h1>Heading</h1>
        </div>
        <div style="display: table-row;background-color: pink;height: 100%;">
            <!-- this row consumes all remaining height without overflow -->
            <div style="display: table-cell;width: 10em;min-width: 10em;background-color: red;">
                Just an example of some fixed width column/cell
            </div>
            <div style="display: table-cell;background-color: blue;">
                takes the remaining width
            </div>
        </div>

   </div>

</div>
于 2014-03-24T11:13:39.397 回答