-2

ボタンをクリックすると表示されるカスタム ダイアログ ボックスがあります。ダイアログ ボックスが表示された後、オーバーレイを表示します。オーバーレイの高さと幅は です100% x 100%。ここで問題が発生します.height 100％はブラウザウィンドウの高さを取得するだけなので、ページを下にスクロールしても上部に残ります。高さをブラウザではなくページ全体の高さに設定するにはどうすればよいですか?

フィドル。

HTML:

<div id="overlay"></div>
<div class="description" style="text-align: justify;">Some text..(whole big text is in the fiddle didn't wrote here to shorten the code :))</div>
<div style="text-align: right">
    <button id="offer_help">Offer Help</button>
</div>
<div class="offer_a_help">
    <textarea rows="5">Write a short experience about yourself</textarea>
    <textarea rows="5">Write what do you want in return</textarea>
    <button id="send_offer">Send Offer</button>
</div>

CSS:

#overlay {
    opacity: 0.5;
    width: 100%;
    height: 100%;
    background-color: black;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
#offer_help {
    background-color: #eee;
    border: 0;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0px 0px 3px 1px #aaa;
}
.offer_a_help {
    display: none;
    width: 400px;
    height: 250px;
    position: fixed;
    top: calc(100%/2 - 350px/2);
    left: calc(100%/2 - 250px/2);
    background-color: #eee;
    border: 1px solid #bbb;
    text-align: center;
}
.offer_a_help textarea {
    width: 90%;
    padding: 2px;
    font-family: Calibri;
}
.offer_a_help textarea:first-child {
    margin-top: 20px;
}
.offer_a_help button {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    border: 1px solid #bbb;
    background-color: #ddd;
    padding: 5px;
    border-radius: 3px;
}

高さをブラウザではなくページ全体の高さに設定するにはどうすればよいですか?

4

2 に答える 2

3

position: absolute要素をドキュメントと一致させません。高さはビューポートの高さであり、左上の値は静的です。これを に変更するposition: fixedと、より良い結果が得られます。

于 2013-07-04T19:02:32.897 に答える
1

使用位置：固定。

http://jsfiddle.net/ryJEW/2/

#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: fixed;
top: 0;
left: 0;
}
于 2013-07-04T19:07:42.857 に答える