Ostatnio edytowany:

overflow-y

Autor: Virtual Patriot

Opis właściwości overflow-y

Za pomocą właściwości overflow-y możemy określić co ma stać się z treścią niemieszczącą się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości overflow-y

przeznaczenie

element HTML tworzący blok treści

pozycja

dowolna

dziedziczenie

nie

wartość initial

visible lub auto (gdy wartością właściwości overflow-x elementu HTML jest wartość różna od wartości visible)

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości overflow-y

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości overflow-y

visible

Opis

Wartość visible jest domyślną wartością właściwości overflow-y.

Domyślnie treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu elementu HTML pozostaje widoczna.

Przykład

  overflow-y:visible;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu przykładowego elementu "div" pozostała widoczna.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:250px;
        height:75px;
        border:15px solid silver;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

hidden

Opis

Za pomocą wartości hidden właściwości overflow-y możemy sprawić, że treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu interesującego nas elementu HTML zostanie ukryta.

Przykład

  overflow-y:hidden;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu przykładowego elementu "div" została ukryta, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-y" wraz z wartością "hidden".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow-y:hidden;
        width:250px;
        height:75px;
        border:15px solid silver;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

scroll

Opis

Za pomocą wartości scroll właściwości overflow-y możemy sprawić, że do obszaru interesującego nas elementu HTML zostanie dodany (nawet gdy nie jest to konieczne) pionowy suwak służący do przewijania treści.

Przykład

  overflow-y:scroll;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do obszaru przykładowego elementu "div" został dodany pionowy suwak służący do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-y" wraz z wartością "scroll".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow-y:scroll;
        width:250px;
        border:15px solid silver;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

auto

Opis

Za pomocą wartości auto właściwości overflow-y możemy sprawić, że do obszaru interesującego nas elementu HTML zostanie dodany (lecz tylko wtedy, gdy jest to konieczne) pionowy suwak służący do przewijania treści.

Przykład

  overflow-y:auto;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Ze względu na to, iż treść przykładowego elementu "div" nie mieści się w obszarze wyznaczonym przez zewnętrzną krawędź dolnego wewnętrznego marginesu przykładowego elementu "div", do obszaru przykładowego elementu "div" został dodany pionowy suwak służący do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-y" wraz z wartością "auto".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow-y:auto;
        width:250px;
        height:75px;
        border:15px solid silver;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>