Mixing
Fixed content within scrollable column
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I have two separately scrollable columns on my page. On the left column which has navigational role I have two sub elements which are scrollable all together at the moment:
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll">
<p> a - this part I want to be fixed <p>
<div>
<p> b - this part is scrollable </p>
</div>
</div>
<div class="col-9 nav-scroll">
<p> c - scrollable as well<p>
</div>
</div>
the general view is presented in the jfiddle below:
https://jsfiddle.net/macfol/wtx9zhsq/
What I would like to achieve is to have the bottom part (b) to be scrollable while having top part (a) to be fixed on top of the column and always visible to the user.
html scroll bootstrap-4
asked Jan 3 at 13:16
MaciejMaciej
74311
add a comment |
0
I have two separately scrollable columns on my page. On the left column which has navigational role I have two sub elements which are scrollable all together at the moment:
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll">
<p> a - this part I want to be fixed <p>
<div>
<p> b - this part is scrollable </p>
</div>
</div>
<div class="col-9 nav-scroll">
<p> c - scrollable as well<p>
</div>
</div>
the general view is presented in the jfiddle below:
https://jsfiddle.net/macfol/wtx9zhsq/
What I would like to achieve is to have the bottom part (b) to be scrollable while having top part (a) to be fixed on top of the column and always visible to the user.
html scroll bootstrap-4
asked Jan 3 at 13:16
MaciejMaciej
74311
add a comment |
0
0
0
I have two separately scrollable columns on my page. On the left column which has navigational role I have two sub elements which are scrollable all together at the moment:
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll">
<p> a - this part I want to be fixed <p>
<div>
<p> b - this part is scrollable </p>
</div>
</div>
<div class="col-9 nav-scroll">
<p> c - scrollable as well<p>
</div>
</div>
the general view is presented in the jfiddle below:
https://jsfiddle.net/macfol/wtx9zhsq/
What I would like to achieve is to have the bottom part (b) to be scrollable while having top part (a) to be fixed on top of the column and always visible to the user.
html scroll bootstrap-4
asked Jan 3 at 13:16
MaciejMaciej
74311
I have two separately scrollable columns on my page. On the left column which has navigational role I have two sub elements which are scrollable all together at the moment:
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll">
<p> a - this part I want to be fixed <p>
<div>
<p> b - this part is scrollable </p>
</div>
</div>
<div class="col-9 nav-scroll">
<p> c - scrollable as well<p>
</div>
</div>
the general view is presented in the jfiddle below:
https://jsfiddle.net/macfol/wtx9zhsq/
What I would like to achieve is to have the bottom part (b) to be scrollable while having top part (a) to be fixed on top of the column and always visible to the user.
html scroll bootstrap-4
html scroll bootstrap-4
asked Jan 3 at 13:16
MaciejMaciej
74311
asked Jan 3 at 13:16
MaciejMaciej
74311
asked Jan 3 at 13:16
MaciejMaciej
74311
asked Jan 3 at 13:16
MaciejMaciej
74311
asked Jan 3 at 13:16
MaciejMaciej
74311
74311
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
All you need to do is to differentiate the scroll div with the fixed div
and keep the fixed div in col-3
link to fiddle
please check the link
answered Jan 3 at 13:29
Joykal InfotechJoykal Infotech
1,197316
add a comment |
0
.nav-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 90vh;
float:left;
bottom: 0;
top:0;
}
body, html {
margin: 0;
overflow: hidden;
height:100%;
}
.pLeftBar {
overflow: hidden;
}
.pFixed {
height: 30%;
overflow: hidden;
}
.pScroll {
height: 70%;
overflow-y: auto;
overflow-x: hidden;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
</div>
<div class="pScroll">
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</div>answered Jan 3 at 13:30
Hastig ZusammenstellenHastig Zusammenstellen
2,73011837
add a comment |
0
Something like that?
.head{
position: relative;
background: #FFF;
overflow-y: none;
overflow-x: hidden;
height: 20vh;
z-index: 1;
}
.nav-scroll {
position: relative;
overflow-y: none;
overflow-x: hidden;
height: 90vh;
float:left;
margin 0 0 0 0;
}
body, html {
margin: 0;
padding 0;
overflow-y: hidden;
width: 350px;
height:auto;
}<body>
<div class="head col-9" >
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</body>answered Jan 3 at 13:46
CarloM_dtbCarloM_dtb
1128
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023069%2ffixed-content-within-scrollable-column%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
All you need to do is to differentiate the scroll div with the fixed div
and keep the fixed div in col-3
link to fiddle
please check the link
answered Jan 3 at 13:29
Joykal InfotechJoykal Infotech
1,197316
add a comment |
1
All you need to do is to differentiate the scroll div with the fixed div
and keep the fixed div in col-3
link to fiddle
please check the link
answered Jan 3 at 13:29
Joykal InfotechJoykal Infotech
1,197316
add a comment |
1
1
1
All you need to do is to differentiate the scroll div with the fixed div
and keep the fixed div in col-3
link to fiddle
please check the link
answered Jan 3 at 13:29
Joykal InfotechJoykal Infotech
1,197316
All you need to do is to differentiate the scroll div with the fixed div
and keep the fixed div in col-3
link to fiddle
please check the link
answered Jan 3 at 13:29
Joykal InfotechJoykal Infotech
1,197316
answered Jan 3 at 13:29
Joykal InfotechJoykal Infotech
1,197316
answered Jan 3 at 13:29
Joykal InfotechJoykal Infotech
1,197316
answered Jan 3 at 13:29
Joykal InfotechJoykal Infotech
1,197316
1,197316
add a comment |
add a comment |
0
.nav-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 90vh;
float:left;
bottom: 0;
top:0;
}
body, html {
margin: 0;
overflow: hidden;
height:100%;
}
.pLeftBar {
overflow: hidden;
}
.pFixed {
height: 30%;
overflow: hidden;
}
.pScroll {
height: 70%;
overflow-y: auto;
overflow-x: hidden;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
</div>
<div class="pScroll">
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</div>answered Jan 3 at 13:30
Hastig ZusammenstellenHastig Zusammenstellen
2,73011837
add a comment |
0
.nav-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 90vh;
float:left;
bottom: 0;
top:0;
}
body, html {
margin: 0;
overflow: hidden;
height:100%;
}
.pLeftBar {
overflow: hidden;
}
.pFixed {
height: 30%;
overflow: hidden;
}
.pScroll {
height: 70%;
overflow-y: auto;
overflow-x: hidden;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
</div>
<div class="pScroll">
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</div>answered Jan 3 at 13:30
Hastig ZusammenstellenHastig Zusammenstellen
2,73011837
add a comment |
0
0
0
.nav-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 90vh;
float:left;
bottom: 0;
top:0;
}
body, html {
margin: 0;
overflow: hidden;
height:100%;
}
.pLeftBar {
overflow: hidden;
}
.pFixed {
height: 30%;
overflow: hidden;
}
.pScroll {
height: 70%;
overflow-y: auto;
overflow-x: hidden;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
</div>
<div class="pScroll">
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</div>answered Jan 3 at 13:30
Hastig ZusammenstellenHastig Zusammenstellen
2,73011837
.nav-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 90vh;
float:left;
bottom: 0;
top:0;
}
body, html {
margin: 0;
overflow: hidden;
height:100%;
}
.pLeftBar {
overflow: hidden;
}
.pFixed {
height: 30%;
overflow: hidden;
}
.pScroll {
height: 70%;
overflow-y: auto;
overflow-x: hidden;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
</div>
<div class="pScroll">
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</div>.nav-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 90vh;
float:left;
bottom: 0;
top:0;
}
body, html {
margin: 0;
overflow: hidden;
height:100%;
}
.pLeftBar {
overflow: hidden;
}
.pFixed {
height: 30%;
overflow: hidden;
}
.pScroll {
height: 70%;
overflow-y: auto;
overflow-x: hidden;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
</div>
<div class="pScroll">
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</div>.nav-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 90vh;
float:left;
bottom: 0;
top:0;
}
body, html {
margin: 0;
overflow: hidden;
height:100%;
}
.pLeftBar {
overflow: hidden;
}
.pFixed {
height: 30%;
overflow: hidden;
}
.pScroll {
height: 70%;
overflow-y: auto;
overflow-x: hidden;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
</div>
<div class="pScroll">
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</div>answered Jan 3 at 13:30
Hastig ZusammenstellenHastig Zusammenstellen
2,73011837
answered Jan 3 at 13:30
Hastig ZusammenstellenHastig Zusammenstellen
2,73011837
answered Jan 3 at 13:30
Hastig ZusammenstellenHastig Zusammenstellen
2,73011837
answered Jan 3 at 13:30
Hastig ZusammenstellenHastig Zusammenstellen
2,73011837
2,73011837
add a comment |
add a comment |
0
Something like that?
.head{
position: relative;
background: #FFF;
overflow-y: none;
overflow-x: hidden;
height: 20vh;
z-index: 1;
}
.nav-scroll {
position: relative;
overflow-y: none;
overflow-x: hidden;
height: 90vh;
float:left;
margin 0 0 0 0;
}
body, html {
margin: 0;
padding 0;
overflow-y: hidden;
width: 350px;
height:auto;
}<body>
<div class="head col-9" >
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</body>answered Jan 3 at 13:46
CarloM_dtbCarloM_dtb
1128
add a comment |
0
Something like that?
.head{
position: relative;
background: #FFF;
overflow-y: none;
overflow-x: hidden;
height: 20vh;
z-index: 1;
}
.nav-scroll {
position: relative;
overflow-y: none;
overflow-x: hidden;
height: 90vh;
float:left;
margin 0 0 0 0;
}
body, html {
margin: 0;
padding 0;
overflow-y: hidden;
width: 350px;
height:auto;
}<body>
<div class="head col-9" >
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</body>answered Jan 3 at 13:46
CarloM_dtbCarloM_dtb
1128
add a comment |
0
0
0
Something like that?
.head{
position: relative;
background: #FFF;
overflow-y: none;
overflow-x: hidden;
height: 20vh;
z-index: 1;
}
.nav-scroll {
position: relative;
overflow-y: none;
overflow-x: hidden;
height: 90vh;
float:left;
margin 0 0 0 0;
}
body, html {
margin: 0;
padding 0;
overflow-y: hidden;
width: 350px;
height:auto;
}<body>
<div class="head col-9" >
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</body>answered Jan 3 at 13:46
CarloM_dtbCarloM_dtb
1128
Something like that?
.head{
position: relative;
background: #FFF;
overflow-y: none;
overflow-x: hidden;
height: 20vh;
z-index: 1;
}
.nav-scroll {
position: relative;
overflow-y: none;
overflow-x: hidden;
height: 90vh;
float:left;
margin 0 0 0 0;
}
body, html {
margin: 0;
padding 0;
overflow-y: hidden;
width: 350px;
height:auto;
}<body>
<div class="head col-9" >
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</body>.head{
position: relative;
background: #FFF;
overflow-y: none;
overflow-x: hidden;
height: 20vh;
z-index: 1;
}
.nav-scroll {
position: relative;
overflow-y: none;
overflow-x: hidden;
height: 90vh;
float:left;
margin 0 0 0 0;
}
body, html {
margin: 0;
padding 0;
overflow-y: hidden;
width: 350px;
height:auto;
}<body>
<div class="head col-9" >
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</body>.head{
position: relative;
background: #FFF;
overflow-y: none;
overflow-x: hidden;
height: 20vh;
z-index: 1;
}
.nav-scroll {
position: relative;
overflow-y: none;
overflow-x: hidden;
height: 90vh;
float:left;
margin 0 0 0 0;
}
body, html {
margin: 0;
padding 0;
overflow-y: hidden;
width: 350px;
height:auto;
}<body>
<div class="head col-9" >
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</body>answered Jan 3 at 13:46
CarloM_dtbCarloM_dtb
1128
edited Jan 3 at 14:12
answered Jan 3 at 13:46
CarloM_dtbCarloM_dtb
1128
answered Jan 3 at 13:46
CarloM_dtbCarloM_dtb
1128
answered Jan 3 at 13:46
CarloM_dtbCarloM_dtb
1128
1128
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023069%2ffixed-content-within-scrollable-column%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
