레이아웃으로 몇날몇일 고생중입니다. 조언좀 부탁드립니다.
본문
최대한 상세히 설명하려고 그림까지 만들었습니다.
그림처럼 content와 side 두개의 div가 있고 원하는 조건을 적어놨습니다.
content는 side의 토글 상태 여부에 따라 가로길이가 조절되고
side는 활성화 상태일때 content의 높이와 별개로 그 위치에 고정되어
화면의 높이로 설정이 되도록 하려고 합니다.
제가 여러 방도로 해봤는데 정말 모르겠네요.
두 div를 감싸는 부모 div를 만들고 table 속성을 주고
content와 side에 table-cell 속성을 준다음 해봤는데 이렇게하면 fixed 속성이 먹질않고
table을 쓰지않고 만들면 그냥 side가 content위에 떠있는 상태가 되어 content가 조절이
되지않고 항상 100%를 유지하여 side가 content의 내용을 덮어버립니다.
토글은 사진에 있는 소스로 구현해서 토글은 잘 되는 중입니다.
설명한다고 했는데 잘 전달이 됬는지 모르겠네요.
이걸로 여러번 질문도 했고 비슷한 디자인 소스도 많이 봤지만 방법을 모르겠습니다.
조언좀 부탁드립니다.
답변 2
일단 position: fixed 의 높이가 100%로 적용되기 위해,
html, body {height: 100%} 부여
토글로 side 등장시에 content 너비를 계산.
CSS3 calc() 가 적용가능한 브라우저만을 대상으로 작업한다면
토글시의 content 너비값에 width: calc(100% - 사이드바 너비값); 을 부여
calc() 사용이 불가능하다면 스크립트로 계산하든지 사이드바의 너비값만큼 padding-right: 값을 주는 것을 고려.
위 내용은 table과 table-cell을 사용한 것이 아닌 side의 position: fixed 일때를 가정해서 답변 드린겁니다.
혹시 ie하위버전을 고려하지 않을 수 있다면 `display:flex`를 사용하여 할 수 있을듯 합니다.
자세한 내용은 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 이쪽을 참고하시면 될듯하네요