0

class=main-content高さが100％のdivがあります。リンクをクリックするとポップアップするポップアップフォームを作成しました。理想的には、このフォームはページ全体を構成する div にあります。そうすれば、この div の背景色を灰色にすることができるので、ユーザーがフォームの外をクリックできないように見せることができます。

ただし、高さを 100% に設定しても、ポップアップの高さは親とは異なります。どうしてこれなの？高さは含まれているブロックの % である必要があると思いました。したがって、親と同じ高さであるべきではありませんか?

以下のコードとスクリーンショットをご覧ください。ブートストラップを使用しているため、それが要因である可能性がありますが、スクリーンショットによると、高さパラメーターをオーバーライドしているものはないようです。

編集： CSSのネストを許可するSCSSを使用していることに言及する必要があります。

これは、メイン コンテンツの高さが 100% に設定され、実際にフル スクリーンであることを示しています。 メインコンテンツ

これは、オーバーレイ ポップアップの高さが 100% に設定されていることを示していますが、フル スクリーンではありません。なんで？ オーバーレイモーダル

ここに私のHTMLとCSSがあります：

<div class="main-content">
    <!--...the page without the modal goes here -->

   <!--modal starts --> 
    <div id='overlay'>
        <div id = 'modalpopout'>

        </div>
    </div>
   <!--modal ends-->
</div>

CSS

.main-content{
height:100%;
padding:50px 0 40px 0;
}


#overlay {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%; 
 text-align:center;
 z-index: 1000;
 background-color:rgba(105,105,105,0.8);
 #modalpopout {
     width:500px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;

     }
}
4

2 に答える 2

0

CSS の形式が正しくありません。#modalpopout CSSを #overlay の CSS の外に移動します。

.main-content{
height:100%;
padding:50px 0 40px 0;
}


#overlay {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%; 
 text-align:center;
 z-index: 1000;
 background-color:rgba(105,105,105,0.8);

}


 #modalpopout {
     width:500px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;

     }

これで特定の問題が解決するかどうかはわかりませんが、これが CSS を構成する適切な方法です。

于 2013-04-14T02:19:15.403 に答える