더 좋은 방법이 있나요 (최대 너비)?

Question

내가 작업하고있는 사이트에서 브라우저의 전체 너비를 채우기 위해 background을 원한다는 요소가 있지만 그 요소에 max-width이 있어야합니다.

나는 이것을 할 수는 있지만, 나는 현재보다 '할 수있는'것이 더 나은 것 같아. 여기

원시 예와 바이올린입니다 : http://jsfiddle.net/5KJf5/

당신이 바이올린에, 클래스 max_w이 요소에 max-width 넣어 단독으로 존재 수 있듯이, 을 .row 클래스에 넣으면 max-width에 background-color이 중지됩니다.

요소의 background-color 범위 여전히이 작업을 수행하는 특별한 클래스를 만드는 것보다 다른 max-width을 유지 할 수있는 동안 화면 전체를 수있는 더 나은 방법이 있나요 :

그래서, 내 질문은 이것이다?

미리 감사드립니다.

Answer 1

내가 요소의 실제 영역 바깥 배경을 확장하는 직접적인 방법이 없다 생각합니다.

.row { 
    ... 
    padding: 10px calc((100% - 300px)/2); 
    box-sizing:border-box;  
} 

: 당신이 정말 원하는 것을, 우리가 calc() 기능의 도움으로 상대 padding을 사용할 수 있습니다 달성하기 위해, 우리는 또한 box-sizing 컨테이너의 크기가 국경 (기본적으로없는 내용)을 포함 그래서 border-box에 설정해야

이제 여기에 fiddle demo

Answer 2

해당 배경에 : before를 사용할 수 있습니다.

.row:before{ 
    content:''; 
    width:100%; 
    height:100%; 
    position:absolute; 
    background-color:aqua; 
    top:0; 
    left:0; 
} 

내 예 : http://jsfiddle.net/5KJf5/5/