<html> 폭이 나는 <code><html></code>에 스타일을 설정 한 그 배경

보다 작 : 페이지의 내용이 페이지보다 넓은 경우<html> 폭이 나는 <code><html></code>에 스타일을 설정 한 그 배경

html { 
    background: #ECECEC; 
    border: 1px solid #FFFFFF; 
}

, 왜 국경 정지하지만, 배경은 계속합니까? 약간의 수정 JQuery와

$("html").width($(document).width()); 
$("html").css("border", "1px solid black");

나는 그것이 CSS를 혼자 잘 작동하지 않는 구식 알고 있지만 적어도 우리가 가질 수를 사용하고 여기에 http://jsfiddle.net/rPGyc/3

출처

2012-06-18 Marcin M

좋은 질문을! 단지''과' '이 특별하고'background-color'에 대해서만 특별하다. 예를 들어 그라디언트는 동일하게 작동하지 않습니다. – Ryan

여기에 문제를 보여주는 바이올린이 있습니다. http://jsfiddle.net/rPGyc/3/ – GregM

필자는 이처럼'html' 요소에 스타일을 추가하는 사람을 보지 못했습니다. 오직'body' 또는 더 나은 아직은 'div'는'body' 안에 앉아 있습니다. 나는 그것이 당신에게 당신이 원하는 효과를 줄 것 같은'div '일 것이라고 생각하지만, 이것이 당신의 질문에 대답하는지 확신하지 못한다. – cobaltduck

html는, 적절한 블록 레벨 요소 단지 등 body, p, div, 같은 -이 때문에 다른 블록 요소처럼 모두 같은 오버 플로우 규칙을 준수하고 있습니다.

그러나 콘텐츠가 너비가 오버플로 될 때 (또는 너비가 브라우저 창 또는 뷰포트의 100 %보다 작을 때) html의 배경이 경계를 벗어나는 이유는 배경색이 뷰포트는 html의 캔버스와 렌더링 된 모든 내용을 포함합니다. 그러나 테두리는 html 요소의 일부로 남아 있으므로 콘텐츠가 오버플로되면 요소가 확장되지 않습니다. 이 동작은 body에 배경을 적용하는 방법과 매우 비슷하지만 html이 아니라 this answer에 설명 된대로 this section of the spec에 설명 된 것처럼 본문 배경이 루트 요소로 전파됩니다.

응답하에 Alohci notes in a comment 같이, 동일한 표시 영역에 대해서 html에 적용 본체 HTML에 대해 동작으로 HTML이 거의 같은 방법으로 표시 영역에 대하여 작동한다는

가

참고 배경은 html 요소의 범위를 벗어나 벗어납니다. 무슨 뜻인지 궁금하다면 http://jsfiddle.net/GmAL4/4/을 참조하십시오.

출처

2012-06-18 15:21:42 BoltClock

: 여기

문제를 보여 바이올린의 jquery로 원하는 결과.

여기에 바이올린있다 : http://jsfiddle.net/rPGyc/5/

출처

2012-06-18 15:15:05 GregM

css3 word-wrap 속성을 사용하는 것을 방지하는 방법입니다. Jsfiddle here

은 간단히 추가

html{ 
background-color: lightgrey; 
border: 1px solid #fff; 
padding:0px; 
margin:0px; 
width:100%; 
height:100%; 
/*The important bit*/ 
word-wrap: break-word; 
}

출처

2012-06-18 15:25:46

<html> 폭이 나는 <code><html></code>에 스타일을 설정 한 그 배경

답변

관련 문제