패딩을 사용하여 CSS 고정 꼬리말 너비

아마추어 CSS 코더이므로 "테이블"증후군을 없애기 위해 고정 바닥 글이 제대로 작동하도록하는 데 문제가 있습니다.패딩을 사용하여 CSS 고정 꼬리말 너비

내 바닥 글 DIV를 100 % 너비로 설정했지만 DIV 안에 30 픽셀의 패딩이 있기 때문에 바닥 글은 100 %를 초과하여 60 픽셀을 확장합니다.

이 문제를 어떻게 해결할 수 있습니까?

내 CSS는 이것이다 :

그것은 박스 모델 문제 같은 소리

#footerDiv { 
background:url(../images/background/mainBG.gif); 
margin:0 auto; 
padding:15px 30px; 
width:100%; 
bottom:0; 
left:0; 
z-index:4; 
position:fixed 
}

출처

2011-12-05 TheCarver

코드를 게시 할 수 있습니까? –

편집 됨, thanks ... – TheCarver

일반적으로'''# footer'' 또는'''.footer''는 더 의미 상으로 정확합니다. [HTML5 footer element] (http://dev.w3.org/html5/spec-author-view/the-footer-element.html)도 있지만 몇 년 동안 그 점에 대해서는 논쟁하지 않을 것입니다.) – FakeRainBrigand

. 자세한 내용은 look here. 그것은 나에게 많은 의미가 있기 때문에

코드

은 (즉, *와 .footer 교체) 가끔 페이지에있는 모든 요소에 그 적용,

.footer { 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box;   /* Opera/IE 8+ */ 
}

, 그것은 바로 다음과 같습니다 확인합니다.

출처

2011-12-05 01:05:29 FakeRainBrigand

감사합니다. 이것은 미래를 알기에 유용합니다. 귀하의 답변을 사용하여 코드를 수정하지는 않았지만 쉽게 해결할 수있는 아이디어를 제공했습니다. 내 내용을 담고있는 바닥 글 DIV 안에 다른 DIV가 있습니다. 래퍼 용 패딩을 제거하고 대신 내부 DIV에 여백을 추가했습니다. 이것은 100 % 사실임을 의미했습니다. 어쨌든 고마워요 :) – TheCarver

좋은 아이디어, 다행 당신을 고무시킬 수있어! – FakeRainBrigand

CSS로 요소의 너비를 설정하면 DIV의 내용 영역 만 설정합니다. 여백 및 테두리 너비가 콘텐츠 영역 외부에서 계산됩니다. 그러나 다른 DIV를 바닥 글 DIV에 넣고 30px로 패딩을 설정하여 외부 DIV의 너비를 100 % 보존 할 수 있습니다.

<DIV style="width:100%"> 
    <DIV style="padding:30px"> 
     <!-- Actual footer content --> 
    </DIV> 
</DIV>

이것은 CSS2.0과 호환됩니다. ;)

출처

2011-12-05 01:12:04

오, 나는 이것을 작성하기 전에 아주 비슷한 것을 한 것뿐입니다. 내가 언급 한 것처럼 내부 DIV를 추가했지만 왼쪽 및 오른쪽으로 30px 여백을 추가했습니다. 이것은 내 외부 DIV가 100 % 사실임을 의미했습니다. 감사 – TheCarver

패딩을 사용하여 CSS 고정 꼬리말 너비

답변

관련 문제