Existe uma maneira de aumentar a largura de um DIV filho maior que o DIV pai usando CSS?

Existe uma maneira de ter um DIV filho dentro de um DIV de contêiner pai que seja mais largo que seu pai. O DIV filho precisa ter a mesma largura da janela de exibição do navegador.

Veja o exemplo abaixo:

O DIV filho deve permanecer como filho do div principal. Eu sei que posso definir margens negativas arbitrárias na div filho para torná-la mais ampla, mas não consigo descobrir como torná-la essencialmente 100% de largura do navegador.

Eu sei que posso fazer isso:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

Mas preciso que o filho tenha a mesma largura do navegador, que é dinâmico.

Atualizar

Obrigado por suas respostas, parece que a resposta mais próxima até agora é tornar a posição DIV filho: absoluta e defina as propriedades esquerda e direita como 0.

O próximo problema que tenho é que o pai tem a posição: relativa, o que significa que as propriedades esquerda e direita ainda são relativas à div pai e não ao navegador, veja o exemplo aqui: jsfiddle.net/v2Tja/2

Não consigo remover a posição relativa dos pais sem estragar tudo o resto.

Use posicionamento absoluto

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Aqui está uma solução genérica que mantém o elemento filho no fluxo do documento:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

Definimos o widthelemento filho para preencher toda a largura da janela de visualização e, em seguida, fazemos com que ela atenda à borda da tela movendo-a para leftuma distância de metade da janela de visualização, menos 50% da largura do elemento pai.

Demo:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

O suporte do navegador para vw e calc () geralmente pode ser visto como IE9 e mais recente.

Nota: Isso pressupõe que o modelo da caixa está definido como border-box. Sem border-box, você também teria que subtrair bordas e bordas, tornando essa solução uma bagunça.

Nota: Recomenda-se ocultar o estouro horizontal do seu contêiner de rolagem, pois determinados navegadores podem optar por exibir uma barra de rolagem horizontal, apesar de não haver estouro.

Eu procurei em toda parte por uma solução para esse problema por um longo tempo. Idealmente, queremos ter o filho maior que o pai, mas sem conhecer antecipadamente as restrições do pai.

E finalmente encontrei uma resposta genérica brilhante aqui . Copiando textualmente:

A idéia aqui é: empurre o contêiner para o centro exato da janela do navegador com a esquerda: 50% ;, em seguida, puxe-o de volta para a borda esquerda com margem -50vw negativa.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Com base na sugestão original da sua sugestão (definindo margens negativas), tentei criar um método semelhante usando unidades de porcentagem para a largura dinâmica do navegador:

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

As margens negativas deixarão o conteúdo fluir da DIV principal. Portanto, defini padding: 0 100%;o botão para empurrar o conteúdo de volta aos limites originais do Chlid DIV.

As margens negativas também farão com que a largura total do .child-div se expanda para fora da janela de exibição do navegador, resultando em uma rolagem horizontal. Portanto, precisamos cortar a largura da extrusão aplicando um overflow-x: hiddena um DIV dos avós (que é o pai da divisão dos pais):

Aqui está o JSfiddle

Já experimentei o de Nils Kaspersson left: calc(-50vw + 50%); funcionou perfeitamente no Chrome e no FF (ainda não tenho certeza sobre o IE) até descobrir que os navegadores Safari não o fazem corretamente. Espero que eles tenham resolvido isso assim que eu realmente gosto desse método simples.

Isso também pode resolver o problema em que o elemento Parent DIV deve ser position:relative

As 2 desvantagens deste método de solução alternativa são:

• Exigir marcação extra (ou seja, um elemento de avô (assim como o bom e velho método de alinhamento vertical da tabela, não é ...)
• As margens esquerda e direita do Child DIV nunca serão exibidas, simplesmente porque estão fora da janela de exibição do navegador.

Informe-me se houver algum problema com esse método;). Espero que ajude.

O Flexbox pode ser usado para tornar um filho mais amplo que seu pai, com três linhas de CSS.

Só da criança display, margin-lefte widthnecessidade de ser definido. margin-leftdepende da criança width. A fórmula é:

margin-left: calc(-.5 * var(--child-width) + 50%);

As variáveis ​​CSS podem ser usadas para evitar o cálculo manual da margem esquerda.

Demo # 1: Cálculo manual

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Demo # 2: Usando variáveis ​​CSS

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Eu usei isso:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

você pode tentar a posição: absoluto. e dê largura e altura, em cima: 'eixo y a partir de cima' e à esquerda: 'eixo x'

Eu tive uma questão semelhante. O conteúdo do elemento filho deveria permanecer no elemento pai enquanto o plano de fundo tinha que estender a largura total da janela de exibição.

Resolvi esse problema criando o elemento filho position: relativee adicionando um pseudo elemento ( :before) a ele position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. O pseudo elemento fica atrás do filho real como um pseudo elemento de fundo. Isso funciona em todos os navegadores (mesmo IE8 + e Safari 6+ - não tem a possibilidade de testar versões mais antigas).

Violino de exemplo pequeno: http://jsfiddle.net/vccv39j9/

Adicionando à solução de Nils Kaspersson, também estou resolvendo a largura da barra de rolagem vertical. Estou usando 16pxcomo exemplo, que é subtraído da largura da porta de exibição. Isso evitará que a barra de rolagem horizontal apareça.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Supondo que o pai tenha uma largura fixa, por exemplo, #page { width: 1000px; }e esteja centralizado #page { margin: auto; }, você deseja que o filho caiba na largura da janela de exibição do navegador que você pode simplesmente fazer:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

Para tornar o div filho tão amplo quanto o conteúdo, tente o seguinte:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Eu sei que isso é antigo, mas para quem vem a isso como resposta, você faria assim:

Estouro oculto em um elemento que contém o elemento pai, como o corpo.

Dê ao seu elemento filho uma largura muito maior que a sua página e posicione-o na esquerda absoluta em -100%.

Aqui está um exemplo:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

Também aqui está um JS Fiddle: http://jsfiddle.net/v2Tja/288/

Então a solução será a seguinte.

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

Eu tentei algumas de suas soluções. Este :

margin: 0px -100%;
padding: 0 100%;

é de longe o melhor, já que não precisamos de css extra para telas menores. Eu criei um codePen para mostrar os resultados: usei uma div pai com uma imagem de plano de fundo e uma div div infantil com conteúdo interno.

https://codepen.io/yuyazz/pen/BaoqBBq