More than 5 years have passed since last update.

【メモ】高さをcssで%指定し、可変に。

CSS3

Last updated at 2014-06-05Posted at 2014-06-04

###高さを%で指定し、可変にする

例
height:calc(80%);

説明下手なので、サンプルで。。
コピペして確認してください。すみません。
↓↓↓↓↓

html

<html>
<body style="text-align:center;">
<div style="height:100%">
<div style="height:60px;">
header<span style="color:#ccc;">(60px)</span>
</div>
<div style="border:1px solid blue;height:calc((100% - 120px) / 2)">
BOX 1 <span style="color:#ccc;">(100% - 120px) / 2</span>
</div>
<div style="border:1px solid red;height:calc((100% - 120px) / 2)">
BOX 2 <span style="color:#ccc;">(100% - 120px) / 2</span>
</div>
<div style="height:60px;">
footer<span style="color:#ccc;">(60px)</span>
</div>
</div>
</body>
</html>

#訂正

<!doctype html>
<html>
<head>
<style>
  html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
  * { box-sizing: border-box; }
</style>
</head>
<body style="text-align:center;">
<div style="height:100%">
  <div style="height:60px;">
    header<span style="color:#ccc;">(60px)</span>
  </div>
  <div style="border:1px solid blue;height:calc((100% - 120px) / 2)">
   BOX 1 <span style="color:#ccc;">(100% - 120px) / 2</span>
  </div>
  <div style="border:1px solid red;height:calc((100% - 120px) / 2)">
   BOX 2 <span style="color:#ccc;">(100% - 120px) / 2</span>
  </div>
  <div style="height:60px;">
   footer<span style="color:#ccc;">(60px)</span>
  </div>
</div>
</body>
</html>

コメントにてご指摘をいただきました。
訂正させていただきます。
@irxground さん、本当にありがとうございます！（2014/6/5）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up