1

CSScalcメソッドは、Opera mini と IE 8 ではサポートされていません。しかし、これは非常に重要なメソッドであるため、これらのブラウザーに相当するものが存在しないとは思えません。

パディングがあるだけでなく、画面全体を埋める div を達成できる普遍的にサポートされている方法はありますか? または、このコードをクロスブラウザーにする方法はありますか?

html

<div class="this-should-fill-the-whole-screen"></div>

CSS

.this-should-fill-the-whole-screen {
  padding: 20px;
  width: calc(100% - 40px);
  height: calc(100vh - 40px);
}

フィドル: http://jsfiddle.net/wfq6xLn5/

4

2 に答える 2

5

解決策が既に存在する問題を「乱用」する必要はありません。calcこの場合、その解決策は と呼ばれbox-sizing:border-boxます。

http://caniuse.com/#feat=css3-boxsizingによると、IE 8 と Opera Mini 8 でサポートされています。

vh（ただし、どちらもユニットと一緒にプレイすることはできませんが、その問題も発生calcします。それを代用できるかどうか100%は、レイアウトの残りの部分に依存します。）

于 2015-03-24T04:16:14.170 に答える
3

解決策として使用できるコードは次のとおりです。

<style>
body, html {
    padding:0; 
    margin:0; 
    height:100%;
}

.this-should-fill-the-whole-screen {
    box-sizing: border-box;  
    padding: 20px;
    width: 100%;
    height: 100%;
    background: blue;
}
</style>

<div class="this-should-fill-the-whole-screen">text</div>
于 2015-03-24T04:38:13.310 に答える