화면 크기에 따라 변하는 칸, 버튼 등 고정 시키는 법

css

.main-div-out {
    position: relative;
    margin: 0 auto;
    width: 420px;
}

.main-div-in {
    width: 100%;
    margin: 0 auto;
}

 

<div class="main-div-out">
  <div class="main-div-in ">
    <form id="todo-form">
      <input autocomplete="on" type="text" style="width:100%" placeholder="테스트" required />
    </form>
  </div>
</div>

div main-div-out class로 최대 크기를 지정하고, 그 안에 다른 div class main-div-in을 두고, width : 100%, height : 100% 등을 주게 되면, 모니터, 화면 창 크기 줄이거나 해도 그위치에 변함 없게됨.