div padding 문제입니다. 부모레이어를 벗어나지 못하게 할수 없을까요?
본문
#ad_bo_m { position: relative; width:100%; height:1000px; background:#ffffff;}
#ad_bo_m_l { position: absolute; width:70%; height:700px; left:0%; background:#f4f4f4;}
#ad_bo_m_r { position: absolute; width:30%; height:700px; left:70%; padding:20px; background:#ffff00;}
위 상태인데요
#ad_bo_m_r 부분에 padding을 20px 주니 부모영역(#ad_bo_m) 을 벗어나서 20px+20px 옆으로
튀어나와 버립니다.
width 값이 px이라면 margin-left 로 조정 가능하겠는데
#ad_bo_m_l 과 #ad_bo_m_r 은 서로 7:3 정도 비율로 움직이게 해놔서요..
div 내부 여백이 padding 이라고 알고 있는데요
이 내부 여백값을 아무리 줘도 해당 div의 전체 width 가
늘어나지 않는 방법이 없을까요?
답변 2
와 이거네요!! ㅋㅋㅋ 정말 감사합니다^^
필요하신 분들을 위한 해결방법입니다.
이 방법은 CSS3에서 지원되는 내용입니다.
div_A라는 요소의 width 속성이 100%이고, 여기서 150픽셀만큼 빼고 싶은 경우를 가정하겠습니다.
예전같았으면 자바스크립트를 이용해 100%로 설정된 width의 실제 픽셀수치를 구한 후에 150픽셀을 빼는 방법을 사용했습니다. 한마디로 번거로웠죠.
하지만 CSS3가 많이 사용되고 있는 현재, 그런 번거로운 작업을 하지 않으셔도 됩니다.
#div_A {width:calc(100% - 150px);}
위 처럼 한줄이면 됩니다. calc라는 함수인데요. 이름만 들어도 알 수 있듯 수치를 계산해줍니다. 상이한 단위와 상관없이 말이죠.
예제에서는 %와 px간의 계산이었지만 em, pt, mm 등등 css에서 사용되는 모든 단위를 사용할 수 있습니다.
연산 또한 빼기(-) 뿐만이 아니라 더하기(+), 곱하기(*), 나누기(/)도 가능합니다.
답변을 작성하시기 전에 로그인 해주세요.
