CSS overflow

CSS overflow (scroll) — 100% container height

The following tutorial shows you how to use CSS to do «CSS overflow (scroll) — 100% container height».

CSS Style

The CSS style to do «CSS overflow (scroll) — 100% container height» is

#container !-- w w w . de mo 2 s . c o m--> width:500px; border:3px solid red; margin:0 auto; position:relative; > #sidebar < position:absolute; left:0; top:0; width:150px; height:100%; background-color:yellow; overflow-y:scroll; > #main < margin-left:150px; > p, ul < padding:10px; >

HTML Body

body> div id="container"> div id="sidebar"> ul> li> line 1 li> line 2 li> line 3 li> line 4 li> line 5 li> line 6 li> line 7 li> line 8 li> line 9 li> line 10 li> line 11 li> line 12 li> line 13 li> line 14 li> line 15 li> line 16 li> line 17 li> line 18 li> line 19 li> line 20  !-- w w w . d e mo 2 s . co m -->  div id="main"> p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.    

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> #container < width:500px; border:3px solid red; margin:0 auto; position:relative; > #sidebar < position:absolute; left:0; top:0; width:150px; height:100%; background-color:yellow; overflow-y:scroll; > #main < margin-left:150px; > p, ul < padding:10px; > !-- w w w . d e m o 2 s . c o m -->   body> div id="container"> div id="sidebar"> ul> li> line 1 li> line 2 li> line 3 li> line 4 li> line 5 li> line 6 li> line 7 li> line 8 li> line 9 li> line 10 li> line 11 li> line 12 li> line 13 li> line 14 li> line 15 li> line 16 li> line 17 li> line 18 li> line 19 li> line 20   div id="main"> p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.     

Related

• CSS Make children expand to parent’s width when overflow is set to scroll
• CSS Make overflowing content scroll above element (instead of below)
• CSS Mobile web: -webkit-overflow-scrolling: touch conflicts with position:fixed
• CSS overflow (scroll) — 100% container height
• CSS Overflow scroll and nowrap unwanted scrollbar
• CSS Overflow scroll and nowrap unwanted scrollbar (Demo 2)
• CSS Overflow scroll but visible

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Scrollable layout with height 100%

Hello there 👋🏼, internet users. Today, I’ll show you a CSS trick I frequently forget about when creating scrollable dynamic height layouts. Recently, I was developing a basic layout similar to one below. It took me a while to remember this trick, but once I did, I had a sense of deja vu and finished the layout. There are two way to achieve this:

Way 1: Using css positions:

If you look at the code above, you’ll see what I mean. As you can see, there’s a NAVBAR, a BREADCRUMB BAR, the MAIN SECTION, and a FOOTER all contained within a layout container with the height of height: 100vh . I wanted the sidebar and content-box in my main section to be scrollable. I could set the height as a fixed value, something like height: 800px with overflow-y: scroll but then making the layout responsive will become a nightmare. So, the question arises? 🤔. How can we apply the overflow-y: scroll attribute to a div with a height of 100 percent? The solution 🧪 here is to use position: relative for the main section container and position: absolute for the sidebar and content bar, with overflow-y: scroll .

.main  position: relative; height: 100%; > .sidebar  position: absolute; top: 0; left: 0; bottom: 0; /*stretch from top to bottom w.r.t .main section*/ width: 10rem; overflow-y: scroll; > .content  position: absolute; top: 0; left: 10rem; bottom: 0; right: 0; /* stretch from top to bottom, and shift 10rem from left and stretch till right */ overflow-y: scroll; > 

There are many other ways, to achieve this. It’s just a trick i often use. If you have any alternate way please comment (I’m all 👂). Congratulations 🎉 for reading this. Hope this might help you. Thank you. After many of you suggested there’s a neat way to do this avoiding css positions. I’ve added another solution using css grid.

Way 2: Using css grid

Источник

Руководство CSS Overflow

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- CSS Overflow

Когда содержание элемента больше чем предоставленное пространство, предоставленное элементом, содержимое может переполниться. CSS overflow позволяет вам настроить действие элемента в данном случае.

Примечание: CSS overflow работает только с блочным элементом (block element) с определенной высотой.
2- CSS

CSS : (по умолчанию). Если содержание элемента больше, чем пространство предоставленное элементом, оно переполнится — это действие по умолчанию.

      div 
CSS (Default)
 
 
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
   

3- CSS

      div CSS 
 
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
   

4- CSS

CSS : Браузер создаст прокрутки для элемента. Пользователи могут использовать полосу прокрутки для просмотра оставшегося содержимого.

Примечание: Для большинства браузеров и операционных систем полоса прокрутки элемента всегда отображается, даже если содержимое элемента меньше, чем пространство, предоставленное элементом. Исключения случаются с операционными системами Mac OSX Lion, полосы прокрутки появляются только при необходимости.

      div CSS 
 
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
   

5- CSS

CSS : Аналогично ​​‘scroll‘, но полоса прокрутки появляется только тогда, когда содержимое больше, чем пространство, предоставляемое элементом.

      div CSS 
 
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth. 
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
   

 function changeOverflowX(event) < value = event.target.value; var myDiv = document.getElementById("myDiv"); myDiv.style.overflowX = value; >function changeOverflowY(event)

      #myDiv 
CSS overflow-x, overflow-y
 
 
Overflow-x:
 Visible 
 Hidden 
 Scroll 
 Auto 
 
Overflow-y:
 Visible 
 Hidden 
 Scroll 
 Auto 
  
The value of Pi is 
3.1415926535897932384626433832795029. The value of e is 
2.718281828459045235360287471352662