iprogramista.pl
  • HTML 5
  • CSS 3
  • Javascript
  • SQL
  • Kolory
    • Kolory HTML - konwerter
    • Kolory HTML - odcienie
  • Narzędzia
    • Edytor HTML
    • Licznik znaków
    • Sprawdź IP
    • Lorem Ipsum generator
    • Enkoder Base64
    • Dekoder Base64
    • Guid generator
    • Kalkulator dni
    • Ile do wakacji
  • Plug-ins
    • Przelewy 24 SDK (C#)
    • BS5 Intro Tour
  • Co to jest CSS
  • Jaka jest składnia języka CSS?
  • Co to są selektory CSS?
  • Kolor tekstu i tła w CSS
  • Obramowanie CSS
  • Marginesy CSS
  • Padding / margines wewnętrzny
  • Height/Width
  • Box Model
  • CSS Outline
  • Tekst / czcionka
  • Czionki (font)
  • Wygląd linku
  • Stylizacja list
  • Style tabel HTML
  • CSS Display - wyświetlania elementów
  • CSS pozycjonowanie elementów
  • CSS Overflow
  • CSS float - elementy pływające

CSS Overflow kurs CSS 3

Poprzednia Następna

Właściwość overflow pozwala na zdefiniowanie, co się dzieje z treścią która jest zbyt duża, i nie mieści się w elemencie nadrzędnym.

Jakie wartości może przyjmować overflow?

overflow definiuje, czy treść która nie mieści się na ekranie, ma zostać ukryta, bądź też czy powninien zostać dodany pasek przewijania na danym elemencie.

Właściwość ta, może przyjmować następujące wartości:

  • visible - zachowanie domyślne. Treść, która się nie mieści jest widoczna i wystaje poza element nadrzędny.
  • hidden - treść która się nie mieści będzie niewidoczna.
  • scroll - do elementu zawsze jest dodawany pasek przewijania.
  • auto - zachowanie podobne jak do wartości scroll. W tym wypadku również dodawany jest pasek przewijania, ale tylko w wypadku gdy treść się nie mieści.
Właściwość overflow działa tylko dla elementów blokowych o ustalonech wysokości. Jeżeli nie ustalisz wysokości, to wielkość elementu dopasuje się automatycznie, a pasek przewijania będzie wyszarzony.

overflow: visible

Domyślnie treści wystające poza kontener są widoczne (mają wartość visible). Domyślne zachowanie ilustuje poniższy przykład:

overflow: hidden

Jeżeli chcesz ukryć treść wystającą poza kontener, wystarczy ustawić overflow: hidden;

overflow: scroll

Jeżeli chcesz, to możesz równiez dodać pasek przewijania. Dzięki temu treści, które się nie mieszczą, będą widoczne po urzyciu pokrętła myszy.

Pamiętaj, że w tym przypadku, paski przewijania będą zawsze widoczne, nawet jeżeli treść mieści się na ekranie.

overflow: auto

overflow: auto; zachowuje się bardzo podobnie jak w poprzednim przykładzie wartość scroll. Różnica polega na tym, że pasek przewijania pojawi się tylko, jeżeli treść się nie mieści. Ponadto w poniższym przykładzie, pojawi się tylko pionowy pasek przewijania, bo poziomy nie jest potrzebny w tym przypadku.

Poprzednia Następna

Kursy programistyczne

Oferujemy darmowe kursy programowania od podstaw.


Lista kursów

HTML 5

CSS 3

Javascript

SQL


Kontakt

info@iprogramista.pl


©2019-©2025 Copyright: iprogramista.pl