CSS Overflow

De eigenschap overfow kan je gebruiken als de inhoud te groot is om in een gebied te passen.

Deze tekst is erg lang en de hoogte van de container is slechts 100 pixels. Daarom is er een schuifbalk toegevoegd om de lezer te helpen door de inhoud te kunnen scrollen.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Voorbeeld uitproberen

CSS overflow eigenschap

Het kan voorkomen dat de inhoud van een element groter is dan de afmetingen van een gebied. De opgegeven width en height eigenschappen laten bijvoorbeeld onvoldoende ruimte toe om de inhoud van een element op te nemen. Met de overflow eigenschap wordt bepaald wat er gebeurt, als de inhoud van een element de opgegeven hoogte of breedte ervan te boven gaat.

visible	-	De waarde visible zorgt ervoor dat afmetingen van de box zo worden aangepast, dat de gehele inhoud van het element toch zichtbaar blijft (standaard).
hidden	-	Met de waarde hidden wordt de inhoud weergegeven tot de afmetingen van het element bereikt zijn, maar er worden geen schuifbalken geplaatst.
scroll	-	De overloop wordt afgekapt en er wordt een schuifbalk toegevoegd om de rest van de inhoud te zien
auto	-	Bij de waarde scroll moeten altijd schuifbalken worden geplaatst, ook wanneer dit niet nodig is om de gehele inhoud weer te geven.

Voorbeeld:

div {
  background: teal;
  color: white;
  padding: 15px;
  width: 50%;
  height: 100px;
  border: 1px solid #ccc;
}

Uitproberen

De eigenschap overflow werkt alleen voor blokelementen met een opgegeven hoogte (height).

CSS overflow: visible

Standaard is de overflow visible, dit betekent dat deze niet wordt afgekapt en buiten de kader van het element wordt weergegeven.

Je kunt de eigenschap overflow gebruiken als je meer controle wilt hebben over de layout. De eigenschap overflow specificeert wat er moet gebeuren als de inhoud te groot is om in een gebied te passen.

Voorbeeld:

div {
  background-color: skyblue;
  width: 200px;
  height: 70px;
  border: 1px solid;
  overflow: visible;
}

Uitproberen

CSS overflow: hidden

Met de waarde hidden wordt de overflow afgekapt en wordt de rest van de inhoud verborgen.

Voorbeeld:

div {
  overflow: hidden;
}

Uitproberen

CSS overflow: scroll

Door de waarde van de eigenschap overflow in te stellen op scroll wordt de overloop afgekapt en wordt er een schuifbalk toegevoegd om in het vak te kunnen scrollen. Merk op dat hierdoor zowel horizontaal als verticaal een schuifbalk wordt toegevoegd zelfs als je deze niet nodig hebt.

Voorbeeld:

div {
  overflow: scroll;
}

Uitproberen

CSS overflow: auto

De waarde auto is vergelijkbaar met de waarde scroll maar voegt alleen schuifbalken toe wanneer dat nodig is.

Voorbeeld:

div {
  overflow: auto;
}

Uitproberen

CSS overflow-x en overflow-y

De eigenschappen overflow-x en overflow-y geven aan of de overflow van de inhoud alleen horizontaal of verticaal (of beide) moet worden gewijzigd.

overflow-x	-	Specificeert wat er moet gebeuren met de linker of rechter rand van de inhoud.
overflow-y	-	Specificeert wat er moet gebeuren met de boven en onder rand van de inhoud.

Voorbeeld:

div {
  overflow-x: hidden; /* Verberg horizontale schuifbalk */
  overflow-y: scroll; /* Voeg toe verticale schuifbalk */
}

Uitproberen

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.