2017-12-23 53 views
0

に等しく、ポップアップ絶対非常に長いメニュー(身長より長い)フッターの後に空き領域がたくさんあります。問題は、ボディの高さがこの時点でドキュメントの高さよりも低いことです。CSS。内容が小さく、身長が100%の場合、フッタがウィンドウの下部に押された状態で、文書の高さに等しい身長は

どのようにしてcssを使用して、本文の高さをドキュメントの高さに追従させるか。

Example on jsfiddle

body, html { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.main { 
 
    border: 1px solid red; 
 
    height: 100%; 
 
} 
 
.ab { 
 
    left: 2em; 
 
    top: 2em; 
 
    right: 10em; 
 
    height: 150vw; 
 
    position: absolute; 
 
    border:1px solid yellow; 
 
}
<div class="main"> 
 
<div class="ab"></div> 
 
</div> 
 
<style> 
 

 
</style>

UPD。 は、CSSソリューションを探しています。

$("body").height($(document).height()); 
+0

スクロール本文は文書です。どのような要素を体の高さに合わせたいと思いますか? –

+0

私は表記の誤りをお詫びします jQueryの視覚的な画像と例が私に何を望むかを教えてくれることを願っています – MrSwed

+0

純粋なCSSソリューションをお望みですか?またはJavaScript/jQueryが許可されていますか? –

答えて

0

問題がposition: absolute;を持つ.ab要素によるものである:JS(jQueryの)上 が、それはこのようないくつかを行うことができます。これにより、要素がドキュメントフローから取り出され、ドキュメントの高さが変化しなくなります。

これを修正するには.abposition: relativeに変更してください。これには他のHTML /レイアウトの変更が必要な場合があります。

function addElement() { 
 

 
    document.getElementById("ab").classList.add("show") 
 
}
html, 
 
body { 
 
    height: 100%; 
 
    position: relative; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.main { 
 
    border: 1px solid red; 
 
    min-height: 100%; 
 
    box-sizing: border-box; 
 
} 
 
#ab { 
 
    box-sizing: border-box; 
 
    width: 90vw; 
 
    margin: 30px 5vw; 
 
    height: 150vw; 
 
    position: relative; 
 
    border:1px solid yellow; 
 
    display: none; 
 
} 
 

 
#ab.show { 
 
    display: block; 
 
}
<div class="main"> 
 
<div id="ab"></div> 
 
<button onclick="addElement()">Add tall element</button> 
 
</div> 
 
<style> 
 

 
</style>

+0

例は大幅に簡略化されています。 – MrSwed

+0

はい、それはここの譲歩の一つです。残念なことに、唯一の選択肢は、JavaScriptを使用してクラスをbodyまたはmain要素に適用して高さを変更することです。つまり、 '.ab'要素は' position:absolute; 'を持ち、要素の高さには影響しません。 –

+0

他の要素の高さに影響を与えたい場合は絶対位置を使用しないでください – JoshKisb

0

あなたは、これがメインのdivの高さを向上させ、スクロールを削除するか、他uがオーバーフロー-Yを与えることができますこれを試すことができます。

body, html { 
     height: 100%; 
     padding: 0; 
     margin: 0; 
    } 
    .main { 
    border: 1px solid red; 
    height:100%; 
    overflow-y:scroll; 
    position:relative; 
} 
.ab { 
    left: 2em; 
    top: 2em; 
    right: 10em; 
    height: 150vw; 
    position: absolute; 
    border:1px solid yellow; 
} 
<div class="main"> 
<div class="ab"></div> 
</div> 
<style> 

</style> 
+0

これはあなたが必要と思う..私は動的にポップアップメニューで自分のプロジェクトをチェックします。それはhttps://jsfiddle.net/swed/ckzwsLcn/9/ – MrSwed

+0

で動作します。ああ、..間違ってそれを隠して! – MrSwed

+0

ええ、確かに...どういう意味で「あなたが必要なようだ...」 –

関連する問題