- CSS Layout — Overflow
- CSS Overflow
- overflow: visible
- Example
- overflow: hidden
- Example
- overflow: scroll
- Example
- overflow: auto
- Example
- overflow-x and overflow-y
- Example
- All CSS Overflow Properties
- Html area with scroll
- Как создать горизонтально прокручиваемые контейнеры
- Card
- Card
- Card
- Card
- Card
- Card
- Card
- Card
- Card
- Метод пустого пространства
- Метод Flexbox
- Overflow прокрутка
- Полосы прокрутки
- Заключение
CSS Layout — Overflow
The CSS overflow property controls what happens to content that is too big to fit into an area.
This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. 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.
CSS Overflow
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
The overflow property has the following values:
- visible — Default. The overflow is not clipped. The content renders outside the element’s box
- hidden — The overflow is clipped, and the rest of the content will be invisible
- scroll — The overflow is clipped, and a scrollbar is added to see the rest of the content
- auto — Similar to scroll , but it adds scrollbars only when necessary
Note: The overflow property only works for block elements with a specified height.
Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though «overflow:scroll» is set).
overflow: visible
By default, the overflow is visible , meaning that it is not clipped and it renders outside the element’s box:
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
overflow: scroll
Setting the value to scroll , the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
overflow: auto
The auto value is similar to scroll , but it adds scrollbars only when necessary:
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
overflow-x and overflow-y
The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):
overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
Example
div <
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
>
All CSS Overflow Properties
| Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element’s box |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element’s content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area |
Html area with scroll
- Difference between HTML and CSS
- What are physical tags in HTML?
- HTML | Deprecated Tags
- Container and Empty Tags in HTML
- HTML Comments
- How to set background image in HTML ?
- How to define a list item in HTML5?
- Difference between semantic and non-semantic elements
- How to Create Color Picker input box in HTML ?
- HTML Hex Color Codes
- HTML Block and Inline Elements
- HTML Drag and Drop
- How to set the name for the object in HTML5?
- How to add space between elements ?
- How to create a clickable button in HTML ?
- HTML Links
- How to link back out of a folder using the a-href tag?
- HTML ping Attribute
- HTML disabled attribute
- What is the use of “#” symbol in link URL ?
- How to create a link with a media attribute in HTML5 ?
- How to specify the source URL of the quote using HTML5 ?
- How to specify that the target will be downloaded when a user clicks on the hyperlink in HTML5 ?
- How to specify the hyperlink target for the area of an image in HTML5 ?
- How to make a HTML link that forces refresh ?
- How to set the language of text in the linked document in HTML5 ?
- How to specify what media/device the target URL is optimized for ?
- How to specify URL of resource to be used by the object in HTML5 ?
- How to use Anchor tag as submit button ?
- Elements of a form Tag
- How to set an alternate text for area in HTML5 ?
- How to specify one or more forms the object belongs to ?
- How to specify one or more forms the keygen element belongs to ?
- How to turn on/off form autocompletion in HTML ?
- How to specify that a group of related form elements should be disabled using HTML?
- How to specify how form-data should be encoded when submitting to server ?
- How to specify the URL that will process the data supplied through input(s) when the form is submitted?
- How to specify one or more forms the label belongs to ?
- How to specify multiple forms the select field belongs to in HTML ?
- How to change the type?
- How to specify which form element a label is bound to ?
- How to create a multiline input control text area in HTML5 ?
- How to create form validation by using only HTML ?
- HTML Emojis
- How to animate a straight line in linear motion using CSS ?
- How to specify the media type of the script in HTML5 ?
- How to display video controls in HTML5 ?
- How to mute video using HTML5 ?
- How to add controls to an audio in HTML5 ?
- Create Scanning Animation Loader using HTML & CSS
- How to specify media type of data specified in data attribute in HTML5 ?
- How to set the height and width of the video player in HTML5 ?
- How to check whether an image is loaded or not ?
- How to specify the type of the media resource in HTML5 ?
- How to Create Image Hovered Detail using HTML & CSS ?
- How to define media type of style tag in HTML5 ?
- How to set multiple media resources for elements in HTML5 ?
- How to set a single line break in HTML5 ?
- How to create a progress bar using HTML and CSS?
- How to create Perspective Text using HTML & CSS ?
- How to isolate a part of text that may be formatted in a different direction using HTML5 ?
- Design an Event Webpage using HTML & CSS
- How to Skew Text on Hover using HTML and CSS?
- Programming a slideshow with HTML and CSS
- How to specify that an option-group should be disabled in HTML5 ?
- How to disable the drop-down list in HTML5 ?
- How to define scalar measurement within a given range in HTML5 ?
- How to set the security algorithm of key in HTML5 ?
- How to set minimum and maximum value of range in HTML5 ?
Как создать горизонтально прокручиваемые контейнеры
Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.
После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.
Card
Card
Card
Card
Card
Card
Card
Card
Card