css 레이아웃 - 위쪽 바 + 왼쪽 바 + 바디

먼저 그림을 보면 빨간색 주체의 내용이 크기에 적응하고 위쪽 난간과 옆 난간이 연장된다.
만약 3개의div와 css 포지셔닝만으로 실현된다면 정말 번거롭고 여러 가지 문제가 발생할 수 있다.
웹 페이지를 처음 응용할 때 바로 표로 보조적인 위치를 정했지만 현재 각종 효과 때문에 표의 위치를 정할 수 없지만 이런 기초 구조는 그래도 사용할 수 있고 매우 편리하다.
html

바로 이런 칸입니다. 2x2는 모두 4개의 칸입니다. 그리고 첫 번째 칸은 칸을 합칩니다. ok. html에서 표 전체가 고정된 크기이기 때문에 어떤 칸도 크기를 설정하고 다른 칸은 채웁니다.
상단 난간
사이드바
바디
css

html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#toptool{
    background-color: #35864a;
    height: 100%;
    width: 100%;
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.2);
}

#lefttool{
    width: 100%;
    height: 100%;
    background-color: #40d5b3;
}
#content{
    width: 100%;
    height: 100%;
    background-color: #c72d2d;

}

테이블 내부의 여백 해제 방법: