repeat-y layout issue - html
update: at bottom
I am trying to get a layout working where the body background image is also the background for the first 123px of the main content div. I then want to put a background on the main content div (starting at 123px) and then fill down.
However repeat-y obviously fills both up and down and therefore repeats over the top of the body background.
----------------------
| |
| HEADER DIV + NAV |
BODY WITH | | BODY WITH
BACKGROUND IMAGE|--------------------| BACKGROUND IMAGE
| ^ |
| CONTENT DIV | |
| 123px|
| | |
| v |
|--NEW CONTENT IMAGE-|
BODY WITH | | BODY WITH
BACKGROUND IMAGE | | BACKGROUND IMAGE
| |
| |
|<--------------------100 % Width------------------->|
Something like this works great for a no-repeat:
#content {
background: transparent url(images/content.gif) no-repeat center 123px;
width: 970px;
margin: 0 auto;
padding: 0 0 0;
position:relative;
}
but as soon as i add the repeat-y its going to fill the content div both up and down and overlay the first 123px of the background that i want from the body bg image.
I was thinking of adding a div inside the #content div which i set the repeating image on but then all my content would have to start 123pixels down and i want it to start at the top of the content div.
any ideas how i can overcome this?
UPDATE:
Thanks for the reponses. I only just foud this site and i am quite new to html/css but i love the idea of the site. Hopefully i can help with some XSLT for others :)
Ok Erik's post has got me very close to what i need. I think i am not doing things the best way by trying to use the body background image in the top of the content div. I am going to slice the relavent part out of the background image and use it as a separate image in the top of the content div and use the z-index to put it on top of my main content repeat-y (shown in my example below by the dashed border).
my only remaiing problem with this is getting the content wrapper to scale vertically according to the content within. I have tred lots of things but i cant get it to work!
here's basically what i have now (sorry i cant host the example, but it should show the height problem).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<style>
* {margin: 0; padding: 0; }
body {
font-family:Arial,Helvetica,sans-serif;
width:100%;
background:red url(images/bg.jpg) no-repeat scroll center top;
display:table;
}
#top_bar{
height:17px;
background: green url(images/top_bar.jpg) no-repeat scroll center top;
padding:0;
margin:0 auto;
}
#header{
height:221px;
width: 970px;
background:pink;
position:relative;
margin: 0px auto;
}
#wrapper{
position: relative;
margin: 0 auto;
height: 300px;
width: 970px;
}
#content {
color:white;
height:100%;
width: 970px;
margin: 0 auto;
padding: 0 0 0;
position:absolute;
top:0;
left:0px;
z-index: 3;
}
#top-background{
height:123px;
width: 970px;
position:absolute;
background:red;
top:0;
left:0px;
z-index: 2;
border:dashed 3px #000;
}
#bottom-background{
height:100%;
width: 970px;
background: blue url(images/content.gif) repeat-y center top;
position:absolute;
top:0px;
left:0px;
z-index: 1;
}
#wrapper-foot{
height:50px;
width:970px;
position:relative;
margin: 0 auto 50px;
background:orange;
z-index: 1;
}
</style>
<title>Hi there</title>
</head>
<body>
<div id="top_bar" ></div>
<div id="header">
<!-- some nav etc -->
</div>
<div id="wrapper">
<div id="top-background"></div>
<div id="bottom-background"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div id="wrapper-foot"></div>
</body>
</html>
You can get what you want with some z-index fun. Its not terribly semantic, but it works. Here's an example:
http://www.pixeloution.com/bg_test.html
You can view source for the code.
Basically, I've put the column in a wrapper, and positioned the wrapper where I want the column. Then I've given the column an absolute position and a zindex of 3. Next, I create a div to hold the top half background, and give that a zindex of 2. Finally, the background that will repeat all the way down the page, and give that a zindex of 1. The entire page is here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<style>
#wrapper {
position: relative;
margin: 0 auto;
width: 300px;
height: 600px;
}
#column {
position: absolute;
margin: 0 auto;
height: 600px;
z-index: 3;
}
#top_background {
width: 300px;
height: 150px;
position: absolute;
top: 0px;
left: 0px;
background: pink;
z-index: 2;
}
#bottom_background {
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: orange;
z-index: 1;
}
</style>
<title>Hi there</title>
</head>
<body>
<div id="wrapper">
<div id="top_background"></div>
<div id="bottom_background"></div>
<div id="column">
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
</div>
</div>
</body>
</html>
I suggest using this structure of html:
<html>
<body>
<div id='header'>stuff</div>
<div id='content'>stuff</div>
<!--footer optionally -->
</body>
</html>
suggested css:
body { text-align: center; }
body div { text-align: left; } /* centering for ie6 */
#header { height: 123px }
#content { background:transparent url(images/content.gif) repeat-y; }
I hope this helps.
I can help better if I see what the current structure of your html is.
Cheers,
jrh
Related
How to align text on top of image and make it responsive?
Sorry am very new to HTML and CSS. I am trying to achieve a responsive lading page. I was able to display text on image by changing image style to relative and text style to absolute. However when I try to resize the site to mobile or tablet size the text goes under the second image.
Am not sure if I am doing anything wrong. Kindly advise.
Please advise what's the best approach to display text on image and make the site responsive?
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<img class="bg_image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
<h2 class="Lorem_Headding">Lorem ipsum </h2>
<p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id diam. Tempor orci dapibus ultrices in iaculis nunc sed. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img class="bg_image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
<h2 class="Lorem_Headding">Lorem ipsum </h2>
<p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id diam. Tempor orci dapibus ultrices in iaculis nunc sed. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.</p>
</div>
</div>
</div>
.bg-image {
position: relative;
}
.Lorem_Headding{
position: absolute;
color: rgb(255, 255, 255);
top: 200px;
left: 50px;
width: 100%;
}
.p-text{
color: white;
position: absolute;
top: 250px;
left: 50px;
width: 660px;
}
.p-text does not need the width: 660px;. the div should wrap the text. you can give the margin, padding for the better UI. for the responsive issue you can try using media query for each screen width.
How is a flex child's 100% width calculated?
When I set the .sidebar width to be 100%, it gets smaller than before.
However, when I remove the body's font-size: 1.3rem and toggle the .sidebar's width: 100%, it gets slightly larger.
I know that when we set the font-size to be 1.3rem, .primary-content's horizontal width (if it didn't wrap) should still be the same ratio as the .sidebar's width (if it didn't wrap).
So I'm not sure how flexbox calculates width: 100%
body {
font-size: 1.3rem;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
max-width: 1100px;
margin: 0 auto;
}
.row {
display: flex;
}
.primary-content {
background-color: moccasin;
}
.sidebar {
/* width: 100%; */
padding: 1em;
text-align: center;
color: #fff;
background-color: #136c72;
}
<main class="main container row">
<section class="primary-content">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
Here's the codepen.
https://codepen.io/Fullchee/pen/OJMBovq
It's all about the initial width here. To understand this let's take another simple example with less code:
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
}
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
It's trivial, that the second case seems a bit strange because the width is reduced but this is logical.
First, you should notice that both elements have the same content and the content need to wrap inside each one because there is not enough space.
If we reduce the content it will be different:
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
}
<div class="box">
<div>
Lorem ipsum dolor sit amet,
</div>
<div>
Lorem ipsum dolor sit amet,
</div>
</div>
<div class="box">
<div>
Lorem ipsum dolor sit amet,
</div>
<div style="width:100%;">
Lorem ipsum dolor sit amet,
</div>
</div>
To understand both cases, you need to understand the flexbox algorithm that I will summarize in 3 points:
We first set the initial width of each element
If the total width is bigger that the container width, we shrink both elements
The shrink factor consider the negative free space (total width - container width) and the width of each element.
The trick is in the (1).
Without width:100% we will have the following in (1)
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Both elements have the same width so both will shrink the same way to get the following:
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Now if you make the second element width:100% it will have a smaller initial width
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
The first one is almost 3 times bigger than the second one thus they will not shrink the same way and at the end the second will remain smaller (it will be kept at almost 3 times smaller)
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Same logic apply to your code!
The same logic also apply when smaller content is used but in this case width:100% can make the initial width of the second item bigger so we end having a bigger element (like in the second snippet above)
Some related questions where you will get more details around the calculation and the flexbox algorithm:
How flexbox calculates flex-item's width if no flex-basis or width are set?
Why is a flex item limited to parent size?
The unpredictable wrapping habits of CSS
In case you want to increase the width of your element you can make the first element to shrink more:
body {
font-size: 1.3rem;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
max-width: 1100px;
margin: 0 auto;
}
.row {
display: flex;
}
.primary-content {
background-color: moccasin;
}
.sidebar {
padding: 1em;
text-align: center;
color: #fff;
background-color: #136c72;
}
<main class="main container row">
<section class="primary-content">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
<main class="main container row">
<section class="primary-content" style="flex-shrink:1.2;">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
You can also define flex-shrink for both and make sure it's bigger for the first element:
What is the name of the navigation slider(mostly) on the right of a webpage called?
What is the name of the HTML element shown below? I am trying to research how I can change how it looks like on a page, but I don't know how it is called. I have tried searching slider navigation slider e.t.c... but these are different things. So, what is it called?
It is called scroll bar, Below you can see how it can be added
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>The overflow Property</h1>
<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>
<h2>overflow: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: hidden:</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: auto:</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: visible (default):</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>
How can I make one scrollbox smaller than the other?
I'm coding with CSS. Below is my current code for the scrollbox, but I'm curious if there is a way to make an additional scrollbox smaller than this one.
.scrollbox {
height: 370px;
width: 415px;
overflow: auto;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #fff;
background: transparent;
}
It depends on your text, Please check this jsfiddle hope it helps
.scrollbox {
width: 210px;
height: 210px;
overflow: auto;
color:red;
text-align:left;
margin:0 auto;
}
<div class="scrollbox">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nmmy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluonutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nmmy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluonutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nmmy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voluonutpat.
</div>
overflow set to scroll but still not able to scroll the web page
I have set the overflow to scroll but still i am unable to scroll my web page.
the overflow is reset to hidden automatically once i build and view my web page in visual studio. i also tried adding height in my css but did not work.
Below is my CSS Code :
body
{
margin: 0;
padding: 0;
font-family: "Open Sans";
font-size: 14px;
font-weight: 400;
overflow: scroll;
background-color: #ececec;
color: #102c58;
}
If you add height in your CSS then your scroll will work, without height scroll is not working. Try: height:500px;
Height is missing in CSS. Add height in CSS
div.ex1 {
background-color: lightblue;
width: 300px;
height: 110px;
overflow-y: scroll;
}
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>