0

私は奇妙な行動と戦おうとしています - どんな助けも大歓迎です。

次のような一般的な構造を持つ長くて複雑な HTML ページがあります。

+------------------------------------------+
| Page header                              |
+-----------------------------+------------+
|                             |  Right     |
| Main content                |  Column    |
|                             |            |
+-----------------------------+------------+

「メインコンテンツ」では、すべてのアクションが行われています。発生する可能性のあることの 1 つは、ユーザーがボタンをクリックしたときに、absolute最初は見えない位置の div が表示され、そのコンテンツが AJAX を使用して入力されることです (つまり、コンテンツの量が事前にわかりません)。

heightこのdivの全体が「メイン コンテンツ」の利用可能な高さよりも小さくなる場合、これはうまく機能します。ただし、コンテンツが多いためにこの「ポップアップ」div が長くなってしまう場合は、「メイン コンテンツ」div の下部で切り捨てられます。下には何もないので、下にスクロールしてポップアップのすべてのコンテンツを表示することさえできません。ポップアップの高さ全体に対応するように「メインコンテンツ」を拡大し、ページをポップアップの一番下までスクロールできるようにしたいのですが、これは起こっていません。

私の「メインコンテンツ」のCSSは次のとおりです。

.content {
    width: 770px;
    position: relative;
    overflow-x: visible;
    overflow-y: hidden;
}

ポップアップの CSS は次のとおりです。

#popupedit {
    background-color: #f1f0ec;
    width: 770px;
    z-index: 100001;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

HTML では、popupeditの直接の子ですcontent。チェーンのどこにも高さや最大高さの制限はありません。では、なぜ「ポップアップ」に対応するために「コンテンツ」が成長しないのでしょうか?

4

4 に答える 4

2

.content div 内でポップアップを作成しているようです。

これには、overflow-y: hidden があり、オーバーフローを非表示にします。

ポップアップをコンテンツ div の外に移動してみてください。

于 2012-05-29T08:30:30.547 に答える
0

絶対配置を削除し、別の手法 (フロートなど) を使用してポップアップを配置することで、これを解決できる可能性があります。推測させてください、position: absoluteあまりにも必要ですか？:) もしそうなら、まだ希望があります: コンテンツがロードされた後、JavaScript でコンテンツ div のサイズを変更できます。

$(".content").css("min-height", $("#popupedit").height()+"px");

もちろん、これはポップアップが完全にロードされた後に実行する必要があり、ポップアップが消えた後にサイズ変更を元に戻す必要があります。

$(".content").css("min-height", "");
于 2012-05-29T09:50:57.293 に答える
0

オーバーフローを削除します-y: hidden; そしてそれはうまくいくはずです。また、popupeditに固定高さを与えることをお勧めします

編集：わかりました、このハックを試してください

JS:

var hh = document.getElementById('popupedit').offsetHeight;
document.getElementById('fix').style.height = hh + "px";

CSS:

.content {
    width: 770px;
    position: relative;
    overflow-x: visible;
    overflow-y: hidden;
    height: auto
}
#popupedit {
    background-color: #f1f0ec;
    width: 770px;
    z-index: 100001;
    position: absolute;
    left: 0px;
    top: 0px;
}

#fix { width: 770px; }

HTML:

<div class = "content">
    <div id = "popupedit">
        <p>Something important</p>                
    </div>
    <div id = "fix"></div>
</div>
于 2012-05-29T08:33:59.547 に答える
-1

position:relative;.content の を削除してみてください。とにかく、これは必要ありません (あなたが言っていないことのために必要でない限り)。これは大きな誤解です。多くの人position: relative;がほぼすべての要素に使用しています。それはまったく必要ありません。

この場合#popupedit、ウィンドウではなく親に絶対に配置されるため、問題が発生する可能性さえあります。私が提案するのは、 を削除position: relative;し、ポップアップに static を与え、widthjQuery を使用してその水平位置を計算して中央に配置することです。top: 0;また、取り除くleft: 0;

次に、このコードのスニペットを、ポップアップ表示用に呼び出すコード、または別のファイルに追加します (実際には関係ありません)。

$("#popupedit ").css({
    left: ($(window).width() - $('.className').outerWidth())/2,
    top: ($(window).height() - $('.className').outerHeight())/2
});​
于 2012-05-29T09:01:01.450 に答える