Electron %で大きさをしているのに見切れてしまう

Question

わからないこと

大きさを%で指定して、ウィンドウの大きさに合わせて要素の大きさを変えたいのですがうまくいきません。

(electronで作ってます)

<textarea id="sendMes" rows="1" maxlength="500"></textarea>

html{
    height: 100%;
    width: 100%;
}

body{
    background-color: #18181b;
    color: #dedee3;
    font-family:"メイリオ", "Meiryo", "sans-serif";
    overflow: hidden;

    height: 100%;
    width: 100%;
}

#sendMes{
    position: absolute;
    resize: none;

    margin-top: 5px;

    width: 98.2%;
    right: 10px;
    bottom: 50px;

    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;

    font-family:"メイリオ", "Meiryo", "sans-serif";
    color: white;
    border-radius: 3px;
    background-color: #464649;

}

両端に10pxぐらいの余白をあけて表示したいのですが、もし他にいい方法があるのなら教えてほしいです。

Answer 1

box-sizingで解決しました。