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 の下部ではなく、ページの下部まで拡張されるため、これは私が望むようには機能しません。overflow-y: scroll と height: inherit を試しました。max-height: 100% を試しました。Stackoverflow は、心臓発作を起こす前の最後の希望です!

4

2 に答える 2

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 に答える
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 に答える