64

体の高さ全体をピクセル単位で設定した数より少なく塗りつぶしたい div があります。しかし、私は仕事に行くことができませんheight: calc(100% - 50px)。

これを行う理由は、さまざまな基準に基づいて動的な高さを持つ要素があるためです。たとえば、ヘッダーの高さは、含まれるさまざまな要素に基づいて変化します。次に、コンテンツ div を引き伸ばして、使用可能な残りのスペースを埋める必要があります。

ただし、div 要素はコンテンツの高さのままです。100% を body 要素の高さとして解釈しているようには見えません。

body {
  background: blue;
  height: 100%;
}

header {
  background: red;
  height: 20px;
  width: 100%;
}

h1 {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  height: 30px;
  font-weight: bold;
  background: yellow;
}

#theCalcDiv {
  background: green;
  height: calc(100% - (20px + 30px));
  display: block;
}
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>

正しい方向への助けや指針をいただければ幸いです。

4

7 に答える 7

81

html と本文が 100% に設定されていることを確認する必要があります。また、calc のベンダー接頭辞 (-moz-calc、-webkit-calc など) を必ず追加する必要があります。

次の CSS が機能します。

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

また、html と body でマージン/パディングを 0 に設定します。そうしないと、これが追加されたときにスクロールバーが表示されます。

ここに更新されたフィドルがあります

http://jsfiddle.net/UF3mb/10/

ブラウザのサポート: IE9 以降、Firefox 16 以降、およびベンダー プレフィックス付きの Firefox 4 以降、Chrome 19 以降、Safari 6 以降

于 2013-04-23T08:56:41.383 に答える
2

階層内のすべての親要素の高さは 100% である必要があります。要素に max-height:100% を指定し、直接の親要素に max-height:calc(100% - 90px) を指定するだけです。

IEでもうまくいきました。

html,
body {
    height: 100%
}

parent-element {
    max-height: calc(100% - 90px);
}

element {
    height:100%;
}

ウィンドウのサイズが変更されたとき、またはデータが DOM にロードされたときに、Calc の障害により IE でのレンダリングが失敗します。しかし、上記のこの方法はIEでも機能しました。

于 2016-02-11T12:31:24.323 に答える
0

GWT プロジェクトで calc をスタイリングしている場合、そのパーサーは calc を解析しない可能性があります。これは私にとってはそうではありませんでした...解決策は、次のように css リテラルでラップすることです。

height: literal("-moz-calc(100% - (20px + 30px))");
height: literal("-webkit-calc(100% - (20px + 30px))");
height: literal("calc(100% - (20px + 30px))");
于 2015-12-29T08:58:47.417 に答える
0

何も計算する必要はありません。おそらくそうすべきではありません。

<!DOCTYPE html>
<head>
<style type="text/css">
    body {background: blue; height:100%;}
    header {background: red; height: 20px; width:100%}
    h1 {font-size:1.2em; margin:0; padding:0; 
        height: 30px; font-weight: bold; background:yellow}
    .theCalcDiv {background-color:green; padding-bottom: 100%}
</style>
</head>
<body>
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div class="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.
</div>

簡潔にするためにすべてをまとめました。

于 2013-04-23T09:23:12.133 に答える