CSS – como transbordar de div para largura total da canvas

Eu tenho um DIV contendo, que eu uso como parte da minha grade responsiva. Ele se expande para a largura máxima permitida, que é 1280px, e as margens aparecem para dispositivos grandes. Aqui está o meu CSS + um pouco menos.

.container { margin-left:auto; margin-right:auto; max-width:1280px; padding:0 30px; width:100%; &:extend(.clearfix all); } 

No entanto, em algumas ocasiões, gostaria de transbordar para o lado – digamos que eu tenho uma imagem de fundo ou cor que precisa ser de largura total. Eu não sou ótimo em CSS – mas é possível conseguir o que eu quero?

A solução mais óbvia é apenas fechar o contêiner … tenha seu div de largura total e abra um novo contêiner. O título ‘contêiner’ é apenas uma class … não um requisito absoluto de manter tudo ao mesmo tempo .

Nesse caso, você aplica a cor do plano de fundo à div de largura total e não precisa aplicar uma cor à div restrita interna.

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .container { max-width: 80%; border: 1px solid red; margin: 0 auto; } .fullwidth { background: orange; } header { height: 50px; background: #663399; } .mydiv { /* background: orange; */ min-height: 50px; } footer { height: 50px; background: #bada55; } 
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.

Eu encontrei este truque super útil usando vw nas margins ( fonte )

Exemplo:

 .inner-but-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } 

Demonstração:

 html,body { overflow-x: hidden; /* Prevent scrollbar */ } .inner-but-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); height: 50px; background: rgba(28, 144, 243, 0.5); } .container { width: 300px; height: 180px; margin-left: auto; margin-right: auto; background: rgba(0, 0, 0, 0.5); } 
 
   

yep

yep

yep