Wie kann man den Inhaltsüberlauf in CSS zu einem limitierenden Div machen?

Überlaufinhalt aus einem begrenzenden Div

In CSS fungiert ein div-Element normalerweise als Container, der eine bestimmte Breite und einen bestimmten Rand definiert. Es gibt jedoch Fälle, in denen Sie möglicherweise zulassen möchten, dass Inhalte über die Grenzen des Div hinaus über die gesamte Breite des Bildschirms hinauslaufen. So erreichen Sie dies:

Umgehen Sie den Container

Die einfachste Lösung besteht darin, die Einschränkung des Containers aufzuheben. Anstatt den gesamten Inhalt im Div zu belassen, erstellen Sie ein neues Div für das Element in voller Breite. Dadurch kann das Hintergrundbild oder die Farbe über die Grenzen des ursprünglichen Containers hinausgehen.

Im folgenden Beispiel erstellen wir ein Div mit „voller Breite“ außerhalb des „Containers“:

* {
  box-sizing: border-box;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}

HTML:

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">...</div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

Indem wir den Container aus dem Div voller Breite entfernen, ermöglichen wir, dass sich sein Hintergrund über die gesamte Breite des Divs erstreckt Bildschirm.

Überschreitung der Breite des Containers

Ein anderer Ansatz besteht darin, die Funktion calc() zu verwenden, um die Breite des Elements dynamisch anzupassen. Dies kann auf den übergeordneten Container oder das Element voller Breite selbst angewendet werden.

Zum Beispiel können wir das „Container“-Div so ändern, dass es über seine maximale Breite hinaus erweitert wird:

.container {
  width: calc(100% + 60px);
  max-width: 1280px;
}

In diesem Fall hat der Container jetzt eine Breite, die seine maximale Breite überschreitet, sodass überlaufender Inhalt über die ursprüngliche Grenze hinausragen kann.

Das obige ist der detaillierte Inhalt vonWie kann man den Inhaltsüberlauf in CSS zu einem limitierenden Div machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!