html - 100％-Xpxの高さでdivを作成するにはどうすればよいですか？

Question

単純なdivの高さとパーセンテージに問題があります。ネットを検索しましたが、運がありません。レイアウトは次のとおりです。

<div id="modal">
    <div id="modalHead">HEAD</div>
    <div id="modalBody">BODY</div>
</div>

そのような単純な。css（取り除いた）：

#modal{position:fixed; top:0; left: 0; height:100%;}
#modalHead{height:40px}
#modalBody{height:100%}

問題は、100％の高さと40pxを取得することです。40px余分のスクロールバーになります。そのため、私は負のマージン、height：autoを使用してみましたが、運がありません。これを行う方法はありますか？

基本的に、私が欲しいのは高さの線の何かです：100％-40px。

あなたより！

編集： jsFiddleへのリンク。

score 3 · Accepted Answer

これを試して：

#modal{position:fixed;top:0;left:0;right:0;bottom:0}
#modalHead{height:40px}
#modalBody{position:absolute;left:0;right:0;top:40px;bottom:0}

score 0 · Accepted Answer

body タグと HTML からすべてを削除してみてください

html, body{margin:0px; padding:0px border:0px}

score 0 · Accepted Answer

modalHead 要素が modalBody の高さに影響を与えたくない場合は、次のようにします。

#modalHead{height:40px; position: absolute;}

それができたら、必要に応じて、左と上を使用して残りの寸法と配置をいじることができます。

編集：

あなたのjsfiddleから離れて、最も簡単な解決策は、上で提案したようにして、modalBody内の最初の要素にmargin-top: 40pxまたはtop: 40px（位置に応じて）を追加することだと思います。あなたの jsfiddle の例では、それは p タグになります。

#modalBody p:first-child{margin-top: 40px;}

3 に答える 3