css: make content in fixed-positioned div scrollable

I have a page with some content, and a toolbar to edit this content. The toolbar is positioned fixed to the right of the page. The insides of the toolbar should also be scrollable.

How do I make the insides of this toolbar scrollable? Right now, when I hover over the toolbar and scroll, it results in scrolling the background, not the toolbar content.

I tried

 overflow-y: scroll;

and

 overflow-y: auto;

these did not help.

UPDATE:

Only one of columns inside the toolbar needs to be scrollable.

Example:

https://jsfiddle.net/kyqr5xst/12/

edited Nov 20 '18 at 11:35

asked Nov 20 '18 at 11:02

kurtgn

1,80122042

1

You can add height: 100% to your .column

– elveti
Nov 20 '18 at 11:05

1

adding overflow-y in class "fixed_div" does it for you? --> .fixed_div { overflow-y:auto; }

– Akber Iqbal
Nov 20 '18 at 11:11

add a comment |

I have a page with some content, and a toolbar to edit this content. The toolbar is positioned fixed to the right of the page. The insides of the toolbar should also be scrollable.

How do I make the insides of this toolbar scrollable? Right now, when I hover over the toolbar and scroll, it results in scrolling the background, not the toolbar content.

I tried

 overflow-y: scroll;

and

 overflow-y: auto;

these did not help.

UPDATE:

Only one of columns inside the toolbar needs to be scrollable.

Example:

https://jsfiddle.net/kyqr5xst/12/

edited Nov 20 '18 at 11:35

asked Nov 20 '18 at 11:02

kurtgn

1,80122042

1

You can add height: 100% to your .column

– elveti
Nov 20 '18 at 11:05

1

adding overflow-y in class "fixed_div" does it for you? --> .fixed_div { overflow-y:auto; }

– Akber Iqbal
Nov 20 '18 at 11:11

add a comment |

I have a page with some content, and a toolbar to edit this content. The toolbar is positioned fixed to the right of the page. The insides of the toolbar should also be scrollable.

How do I make the insides of this toolbar scrollable? Right now, when I hover over the toolbar and scroll, it results in scrolling the background, not the toolbar content.

I tried

 overflow-y: scroll;

and

 overflow-y: auto;

these did not help.

UPDATE:

Only one of columns inside the toolbar needs to be scrollable.

Example:

https://jsfiddle.net/kyqr5xst/12/

edited Nov 20 '18 at 11:35

asked Nov 20 '18 at 11:02

kurtgn

1,80122042

I have a page with some content, and a toolbar to edit this content. The toolbar is positioned fixed to the right of the page. The insides of the toolbar should also be scrollable.

How do I make the insides of this toolbar scrollable? Right now, when I hover over the toolbar and scroll, it results in scrolling the background, not the toolbar content.

I tried

 overflow-y: scroll;

and

 overflow-y: auto;

these did not help.

UPDATE:

Only one of columns inside the toolbar needs to be scrollable.

Example:

https://jsfiddle.net/kyqr5xst/12/

css

edited Nov 20 '18 at 11:35

asked Nov 20 '18 at 11:02

kurtgn

1,80122042

edited Nov 20 '18 at 11:35

asked Nov 20 '18 at 11:02

kurtgn

1,80122042

edited Nov 20 '18 at 11:35

asked Nov 20 '18 at 11:02

kurtgn

1,80122042

asked Nov 20 '18 at 11:02

kurtgn

1,80122042

asked Nov 20 '18 at 11:02

kurtgn

1,80122042

1

You can add height: 100% to your .column

– elveti
Nov 20 '18 at 11:05

1

adding overflow-y in class "fixed_div" does it for you? --> .fixed_div { overflow-y:auto; }

– Akber Iqbal
Nov 20 '18 at 11:11

add a comment |

1

You can add height: 100% to your .column

– elveti
Nov 20 '18 at 11:05

1

adding overflow-y in class "fixed_div" does it for you? --> .fixed_div { overflow-y:auto; }

– Akber Iqbal
Nov 20 '18 at 11:11

You can add height: 100% to your .column

– elveti
Nov 20 '18 at 11:05

adding overflow-y in class "fixed_div" does it for you? --> .fixed_div { overflow-y:auto; }

– Akber Iqbal
Nov 20 '18 at 11:11

add a comment |

3 Answers
3

active

oldest

votes

try this:

.fixed_div

{

  overflow: auto;  

}

answered Nov 20 '18 at 11:09

harshit gupta

343

add a comment |

Add overflow:auto; to the .fixed_div

.fixed_div {

  position: fixed;

  top: 0;

  width: 400px;

  bottom: 0;

  

  overflow:auto;

  right: 0;

  border: 1px solid grey;

  background: #ffffff;

  padding: 10px;

  

}



.column {

  color: grey;

  overflow-y: auto;

}

<h1>

Background text

</h1>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<div class="fixed_div">

  <div class="column">

  <h2>Toolbar Content (needs scrolling on hover)

</h2>

  <p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.

Pretty cool, isn't it?

</p>



  </div>

</div>

Fiddle: https://jsfiddle.net/ot9d7kju/5/

answered Nov 20 '18 at 11:10

Viira

2,438526

add a comment |

In your fixed nav add height:auto overflow:auto This will make it.

answered Nov 20 '18 at 11:09

Bidhan Majhi

5081415

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391577%2fcss-make-content-in-fixed-positioned-div-scrollable%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

try this:

.fixed_div

{

  overflow: auto;  

}

answered Nov 20 '18 at 11:09

harshit gupta

343

add a comment |

try this:

.fixed_div

{

  overflow: auto;  

}

answered Nov 20 '18 at 11:09

harshit gupta

343

add a comment |

try this:

.fixed_div

{

  overflow: auto;  

}

answered Nov 20 '18 at 11:09

harshit gupta

343

try this:

.fixed_div

{

  overflow: auto;  

}

answered Nov 20 '18 at 11:09

harshit gupta

343

answered Nov 20 '18 at 11:09

harshit gupta

343

answered Nov 20 '18 at 11:09

harshit gupta

343

answered Nov 20 '18 at 11:09

harshit gupta

343

add a comment |

Add overflow:auto; to the .fixed_div

.fixed_div {

  position: fixed;

  top: 0;

  width: 400px;

  bottom: 0;

  

  overflow:auto;

  right: 0;

  border: 1px solid grey;

  background: #ffffff;

  padding: 10px;

  

}



.column {

  color: grey;

  overflow-y: auto;

}

<h1>

Background text

</h1>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<div class="fixed_div">

  <div class="column">

  <h2>Toolbar Content (needs scrolling on hover)

</h2>

  <p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.

Pretty cool, isn't it?

</p>



  </div>

</div>

Fiddle: https://jsfiddle.net/ot9d7kju/5/

answered Nov 20 '18 at 11:10

Viira

2,438526

add a comment |

Add overflow:auto; to the .fixed_div

.fixed_div {

  position: fixed;

  top: 0;

  width: 400px;

  bottom: 0;

  

  overflow:auto;

  right: 0;

  border: 1px solid grey;

  background: #ffffff;

  padding: 10px;

  

}



.column {

  color: grey;

  overflow-y: auto;

}

<h1>

Background text

</h1>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<div class="fixed_div">

  <div class="column">

  <h2>Toolbar Content (needs scrolling on hover)

</h2>

  <p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.

Pretty cool, isn't it?

</p>



  </div>

</div>

Fiddle: https://jsfiddle.net/ot9d7kju/5/

answered Nov 20 '18 at 11:10

Viira

2,438526

add a comment |

Add overflow:auto; to the .fixed_div

.fixed_div {

  position: fixed;

  top: 0;

  width: 400px;

  bottom: 0;

  

  overflow:auto;

  right: 0;

  border: 1px solid grey;

  background: #ffffff;

  padding: 10px;

  

}



.column {

  color: grey;

  overflow-y: auto;

}

<h1>

Background text

</h1>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<div class="fixed_div">

  <div class="column">

  <h2>Toolbar Content (needs scrolling on hover)

</h2>

  <p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.

Pretty cool, isn't it?

</p>



  </div>

</div>

Fiddle: https://jsfiddle.net/ot9d7kju/5/

answered Nov 20 '18 at 11:10

Viira

2,438526

Add overflow:auto; to the .fixed_div

.fixed_div {

  position: fixed;

  top: 0;

  width: 400px;

  bottom: 0;

  

  overflow:auto;

  right: 0;

  border: 1px solid grey;

  background: #ffffff;

  padding: 10px;

  

}



.column {

  color: grey;

  overflow-y: auto;

}

<h1>

Background text

</h1>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<div class="fixed_div">

  <div class="column">

  <h2>Toolbar Content (needs scrolling on hover)

</h2>

  <p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.

Pretty cool, isn't it?

</p>



  </div>

</div>

Fiddle: https://jsfiddle.net/ot9d7kju/5/

.fixed_div {

  position: fixed;

  top: 0;

  width: 400px;

  bottom: 0;

  

  overflow:auto;

  right: 0;

  border: 1px solid grey;

  background: #ffffff;

  padding: 10px;

  

}



.column {

  color: grey;

  overflow-y: auto;

}

<h1>

Background text

</h1>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<div class="fixed_div">

  <div class="column">

  <h2>Toolbar Content (needs scrolling on hover)

</h2>

  <p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.

Pretty cool, isn't it?

</p>



  </div>

</div>

.fixed_div {

  position: fixed;

  top: 0;

  width: 400px;

  bottom: 0;

  

  overflow:auto;

  right: 0;

  border: 1px solid grey;

  background: #ffffff;

  padding: 10px;

  

}



.column {

  color: grey;

  overflow-y: auto;

}

<h1>

Background text

</h1>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>



<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<div class="fixed_div">

  <div class="column">

  <h2>Toolbar Content (needs scrolling on hover)

</h2>

  <p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.

Pretty cool, isn't it?

</p>

<p>

This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.

Pretty cool, isn't it?

</p>



  </div>

</div>

answered Nov 20 '18 at 11:10

Viira

2,438526

answered Nov 20 '18 at 11:10

Viira

2,438526

answered Nov 20 '18 at 11:10

Viira

2,438526

answered Nov 20 '18 at 11:10

Viira

2,438526

add a comment |

In your fixed nav add height:auto overflow:auto This will make it.

answered Nov 20 '18 at 11:09

Bidhan Majhi

5081415

add a comment |

In your fixed nav add height:auto overflow:auto This will make it.

answered Nov 20 '18 at 11:09

Bidhan Majhi

5081415

add a comment |

In your fixed nav add height:auto overflow:auto This will make it.

answered Nov 20 '18 at 11:09

Bidhan Majhi

5081415

In your fixed nav add height:auto overflow:auto This will make it.

answered Nov 20 '18 at 11:09

Bidhan Majhi

5081415

answered Nov 20 '18 at 11:09

Bidhan Majhi

5081415

answered Nov 20 '18 at 11:09

Bidhan Majhi

5081415

answered Nov 20 '18 at 11:09

Bidhan Majhi

5081415

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk