CSS【アコーディオン発動時の挙動についての疑問】

閲覧ありがとうございます。
どうしてもわからないことがありましたので、お答え頂けますと幸いです。

###概要

・HTML／CSSのみでアコーディオンを作成しています。
・その際のCSSの挙動でいくつか不明点があります。
・不明点の理由解説や改善案をいただけると非常に嬉しいです。

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>アコーディオン</title>
      <style>
      .Btn_open, .Btn_close{
         width      :300px;
         line-height:50px;
         display    :block;
         text-align :center;
         background :#aaa;
         transition:.9s;
      }
      .Area{
         margin:0;
         background:lime;
         width:500px;
         transition:.9s;
      }
      .Box{
         padding:20px;
         width:600px;
         max-height:0;
         overflow:hidden;
         /*box-sizing:border-box;*/
         background:green;
         transition:.9s;
      }
      #open:checked ~ .Box{
         max-height:800px;
         overflow:visible;
         /*box-sizing:border-box;*/
      }
      .Footer{
         margin-top:0;
         line-height:30px;
         background:#555;
      }
      </style>
   </head>
   <body>
      <input type="checkbox" id="open">
      <label for="open">
         <span class="Btn_open">OPEN</span>
      </label>
      <div class="Box">
         <div class="Area">
            <P>コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント</P>
         </div>
         <label for="open" class="Btn_close">
            <span>CLOSE</span>
         </label>
      </div>
      <div class="Footer">
         <p>フッター</p>
      </div>
   </body>
</html>

###1：「box-sizing:border-box」が効かない理由
初期値は「.Box」の高さを「0」に設定しています。
「padding」が含まれているので、初期値でpaddingの高さが表示されないよう、
「box-sizing:border-box」を設定しているのですが効いていないようです。
なぜでしょうか？

###2：アコーディオンがイメージ通りに開かない
「OPEN」をクリックしたときにアコーディオンが開くように設定しましたが、
「緑背景の部分」が滑らかに開くのに対し、
「黄緑のコメント部分」や「CLOSEボタン」が背景のように滑らかに出現しません。
エリア全体を滑らかに開かせる何か良い方法はありますでしょうか？

###3：フッターの上部の余白は？
margin:0を設定しても、フッターの上部に余白ができてしまいます。
これをなくすにはどのようにしたらよいでしょうか？

###補足情報
・可能な限り「CSSのみ」での実装を希望しています。
・緑背景部分の高さは「内容（コメント）の分量によってある程度可変する様にしたいので、
「heiht」での固定数値の指定は避けたいです。

以上、お手数をお掛けしますが
何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

最終的にやりたいイメージが掴めてないので違うかも^^
動きが分かり易いように時間を1.9sにしています。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>アコーディオン</title>
      <style>
      *{
        margin: 0;
        padding: 0;
      }
      .Btn_open, .Btn_close{
         width      :300px;
         line-height:50px;
         display    :block;
         text-align :center;
         background :#aaa;
      }
      .Area{
        margin: 20px;
        background:lime;
        overflow:hidden;
        width: 500px;
        transition: 1.9s;
      }
      .Area p{
        padding: 20px;
         overflow:hidden;
         transition: 1.9s;
      }
      .Area label{
        overflow:hidden;
        transition: 1.9s;
      }
      .Box{
         width:600px;
         max-height:0;
         overflow:hidden;
         box-sizing:padding-box;
         background:green;
         transition: 1.9s;
      }
      #open:checked ~ .Box{
        max-height:800px;
        overflow:hidden;
        box-sizing:border-box;
        transition: 1.9s;
      }
      #open ~ .Box{
        overflow:hidden;
        box-sizing:border-box;
        transition: 1.9s;
      }
      .Footer{
         margin-top:0;
         line-height:30px;
         background:#555;
         box-sizing: border-box;
      }
      </style>
   </head>
   <body>
      <input type="checkbox" id="open">

      <label for="open">
         <span class="Btn_open">OPEN</span>
      </label>

      <div class="Box">
         <div class="Area">
            <P>コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント<br>
            コメントコメントコメントコメントコメント</P>
         </div>

         <label for="open" class="Btn_close">
            <span>CLOSE</span>
         </label>
      </div>

      <div class="Footer">
         <p>フッター</p>
      </div>
   </body>
</html>

投稿2017/05/28 22:23

編集2017/05/28 22:27