css - cssはdivをパディングで4等分します

Question

コンテンツ div があり、ページの幅と高さに応じて 4 つの等しい div が必要です。

現在、これは私のコードです:

HTML:

<div id="content">
<div class='A' id="none" data-panel_type="none">
    <textarea id="1" name="none"></textarea>
</div>
<div class='B' id="none" data-panel_type="none">
    <textarea id="2" name="none"></textarea>
</div>
<div class='C' id="none" data-panel_type="none">
    <textarea id="3" name="none"></textarea>
</div>
<div class='D' id="none" data-panel_type="none">
    <textarea id="4" name="none"></textarea>
</div>
</div>

CSS:

#content {
    border: 2px solid;
    width: 100%;
    height: 100%;
    position: relative;
    top: -15px;
    left: -15px;
    padding: 10px;
  }

  #content .A {
    border: 2px solid;
    width:50%;
    height: 50%;
    float: left;
    background: purple;
  }

  #content .B {
    border: 2px solid;
    width:50%;
    height: 50%;
    float: left;
    background: purple;
  }

  #content .C {
    border: 2px solid;
    width:50%;
    height: 50%;
    float: left;
    background: purple;
  }

  #content .D {
    border: 2px solid;
    width:50%;
    height: 50%;
    float: left;
    background: purple;
  }

動作させるには何を変更する必要がありますか? ありがとう。