내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS
css에서 고정폭+가변폭 div
FIL.
2015. 2. 4. 16:35
728x90
예를들어 이런 구조다.
<div class="container">
<div class="left-child">
<div class="right-child">
</div>
이 상태에서,
1) .container는 부모 요소에서 상속 받은 너비의 100%.
2) .left-child는 200px로 고정.
3) .right-child는 그 나머지.
구글링 해보면 display:inline-block;을 써라, 200px와 100%로 하고 margin-left:200px; 를 줘라 등등이 나온다.
해결되지 않았다.
그러던 중 발견한 stackoverflow의 한 포스팅..
CSS3에는 함수가 있었다!
calc() 함수를 이용하여 100%에서 200px를 빼주면 간단히 된다.
물론 sass나 less도 필요ㅇ벗다.
추가로 css3의 calc() 함수를 지원하는 브라우저는 아래 링크를 따라 가 보면 알 수 있다.
http://techbug.tistory.com/215
