div에서 여백이있는 몸체에서 100 %

나는 40px의 여백을 가진 '몸체'를 가지고 있습니다.div에서 여백이있는 몸체에서 100 %

또한 '정적 위치'를 사용하여 높이가 100 %이고 무게가 100 % 인 div를 추가하고 싶습니다.

제 문제는 제 'div'가 'body'를 뛰어 넘는 것입니다. 내 div가 'body'를 채우고 싶습니다 (40px의 여백으로 존중).

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

Thks

body { 
    background:pink; 
    margin:40px; 
    } 

.contenuWorks { 
    height:100%; 
    width: 100% ; 
    background:red; 
    position:absolute; 
    }

출처

2014-02-16 Bonjour

은 음 ... 당신은 문제가 좀 더 설명 할 수 있을까? JS Fiddle을 보면, 당신이 성취하려는 것과 똑같은 것처럼 보입니다. – berentrom

div의 배경이 신체의 가장자리에 닿지 않도록하는 것이 중요합니까? – Phrogz

@EmeryFramboise @Bonjour는'.countenuWorks' div를 둘러싼 40px의 분홍색 테두리를 원합니다. 위쪽과 왼쪽뿐만 아니라 –

절대 위치 지정을 사용하는 경우 div의 좌표를 설정할 수 있습니다.

바이올린 :

.contenuWorks { 
    left: 40px; 
    right: 40px; 
    top: 40px; 
    bottom: 40px; 
    background:red; 
    position:absolute; 
}

출처

2014-02-16 20:19:34

-1

바이올린 : http://jsfiddle.net/sbDSy/2/

가 왜 body에 div 대신 margin에 padding을 적용하지 :

.contenuWorks { 
    height:100%; 
    width: 100% ; 
    padding:40px; 
    background:red; 
    position:absolute; 
} 

body { 
    margin:0; 
    padding:0; 
}

출처

2014-02-16 20:01:43

콘텐츠 상자 상자 모델에서는 작동하지 않으므로. http://jsfiddle.net/sbDSy/3/ 너무 넓게 만들었습니다. '패딩 박스 (padding-box)'상자 모델을 던지면 승자가 생깁니다. OP가 페이지를 채우는 백그라운드로 OK라고 가정합니다. – Phrogz

'상자 크기 조정 '은 어떻게 사용합니까? –

당신이 box-sizing과 함께 박스 모델을 선택하는 경우 http://jsfiddle.net/EQEPY/, 당신이 없음으로 문제를 켤 수 있습니다.

먼저 트리거와 함께 상자 모델 : box-sizing:border-box;http://www.w3.org/TR/css3-ui/#box-sizing0/http://quirksmode.org/css/user-interface/boxsizing.html

그런 다음 HTML로 패딩으로 몸의 여백을 설정합니다. 선택하는 경우 : border-box CSS에 설정된 크기로 테두리와 패딩이 포함됩니다.

<div> 
    box-sizing and use 
    <code>height: 100%; width : 100%;</code> 
    without headhakes. 
</div>

html, body, div { 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    height:100%; 
    width:100%; 
    border:solid; 
    margin:0; 
} 
html { 
    padding:40px; 
    border:solid red; 
} 
body { 
    border:solid blue; 
} 
div{ 
    border:solid yellow; 
    background:pink; 
}

http://codepen.io/gc-nomade/pen/Fjqzn

출처

2014-02-16 22:00:56

div에서 여백이있는 몸체에서 100 %

답변

관련 문제