콘테이너 div를 피하십시오

Question

당신은 웹 사이트가 있고 당신의 스크린 가로 건너서 전부 뻗는 공상적인 분홍색 머리가다는 것을 말하십시오. 머리글 안에는 가운데에 맞춰야 할 텍스트와 960 픽셀 고정 너비 영역이 있습니다.

--------------------------- 
| x | hello | x | 
|       | 
| y | hi  | y | 
--------------------------- 

X = 분홍색 배경 행 Y = 노란색 배경 행

사람이 패딩 단지 종종 컨테이너 사업부의 필요성을 기각하는 날짜 CSS를 최대 (아무 JS는) 솔루션을 제공합니까?

HTML :

<header> 
    <div> 
     hello 
    </div> 
</header> 
<footer> 
    <div> 
     hi 
    </div> 
</footer> 

CSS :

header { 
    background: pink; 
} 
header > div { 
    width: 960px; 
    margin:0 auto; 
} 

누군가가 솔루션, 전후의 의사와 아마 뭔가가 있습니까? 그래서 당신은 아름다운 HTML을 작성할 수 있습니다

<header>hello</header> 
<footer>hi</footer> 

및 CSS에서 모든 것을 해결.

이것은 기본적인 예입니다. 요점은 다음과 같습니다. 나는 주로 레이아웃 작업을 위해 div를 사용하도록되어 있는데 대부분은 패딩입니다. 물론 트릭을 수행하기 위해 별도의 배경을 설정할 수는 있지만이 문제를 해결하기위한 또 다른 배경이 있기 때문에이 모든 것을 함께 유지하는 것에 대해 이야기하고 있습니다. 그리고 주요 내용과 동일하게, 등등. 뷰포트의 크기를 조정 후 스케일 '트릭을 할'것

header{ 
    background: pink; 
    padding: 100%-960px; 
} 

:

위시 같은 것을 있었다.

Answer 1

일반적으로 나는 컨테이너 클래스와 함께 여러 컨테이너 div를 사용합니다 ... hellow 및 hi와 같이 둘 다 "래퍼 클래스"가있는 div에 있고 x 및 y는 모두 100 % 너비 래퍼 - 래퍼 divs.

하지만 당신의 목표는 래퍼 된 div를 방지하기 때문에 ... 나는 당신이 4 명 래퍼 div의 : 당신이 링크를 조사해야한다고 생각

으로이 작업을 수행 할 수있는 방법에 대해 자세히 다루지 않을 것이다 :

• http://sass-lang.com/
• http://twitter.github.com/bootstrap/#less