Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why css "overflow: scroll" doesn't work and the scroll bar doesn't show?

Tags:

html

css

overflow

I add overflow: scroll to try to make the scroll bar appear, but it doesn't work, and I cannot figure out where is the problem. Please have a look, thank you so much!

What's more, I am using MacOS, and it doesn't work. But based on the same code, my friend uses Windows system, and it can work. By the way, we all use Chrome browser.

This really confuse me:(

UPDATE: I guess the MacOS will hide the scroll bar by default? Because based on the same code, MacOS will hide the scroll bar, and if I scroll down, the scroll bar will show next.But my friend is using Windows, and the scroll bar will always show on the page even he doesn't scroll down.

Here is the code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Box Model</title>
<style>

body {
  background-color: gray;
  margin: 0px;
  padding: 10px;
}

#box {
  background-color: blue;
  border: 10px solid black;
  width: 500px;
  box-sizing: border-box;
  height: 200px;
  overflow: scroll;
}
#content {
  background-color: #90EE90; /*green*/
  margin: 50px;
  padding: 20px;

}

h1 {
  margin-bottom: 30px;
}

</style>
</head>
<body>

<h1>Box Model</h1>

<div id="box">
  <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>


</body>
</html>



like image 742
mango Avatar asked Oct 16 '25 20:10

mango


1 Answers

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll;
}
</style>
</head>
<body>

<h2>Overflow: scroll</h2>

<p>Setting the overflow 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):</p>

<div>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.</div>

</body>
</html>

overflow : scroll , will only work and visible if you have fixed the size of the box and the content inside the box is bigger.

like image 111
Manas Mallik Avatar answered Oct 18 '25 12:10

Manas Mallik