Mixing
Why does navbar appear on top of the scrollbar?
3
The navbar seems to be on top of the scrollbar (note the horizontal line), but I want it to end right next to the scrollbar.
.header {
position: fixed;
z-index: 102;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
height: 40px;
left: 0px;
right: 0px;
}
.header-content {
max-width: 1400px;
margin: 0px auto;
position: relative;
background-color: white;
}
.app {
width: 100%;
height: 100%;
overflow-y: scroll;
}
I've never seen this happen before, and puzzled by why this happens.
How do I get the navbar to end right next to the scrollbar?
css
asked Nov 22 '18 at 11:11
AlexAlex
3,5491629
add a comment |
3
The navbar seems to be on top of the scrollbar (note the horizontal line), but I want it to end right next to the scrollbar.
.header {
position: fixed;
z-index: 102;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
height: 40px;
left: 0px;
right: 0px;
}
.header-content {
max-width: 1400px;
margin: 0px auto;
position: relative;
background-color: white;
}
.app {
width: 100%;
height: 100%;
overflow-y: scroll;
}
I've never seen this happen before, and puzzled by why this happens.
How do I get the navbar to end right next to the scrollbar?
css
asked Nov 22 '18 at 11:11
AlexAlex
3,5491629
Is this the “normal” scrollbar applied to the whole document, or is this the scrollbar of an element inside the page that hasoverflowset …? Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 22 '18 at 11:13
@misorude the scrollbar belongs to.app, which covers the whole page
– Alex
Nov 22 '18 at 11:21
1
Well there’s your answer then … Your header is 100% wide (because of left and right 0), and.appalso is 100% wide - but the latter has a scrollbar shown inside of that 100% width. (This behaves differently only when the scrollbar is applied to the root element.)
– misorude
Nov 22 '18 at 11:26
add a comment |
3
3
3
The navbar seems to be on top of the scrollbar (note the horizontal line), but I want it to end right next to the scrollbar.
.header {
position: fixed;
z-index: 102;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
height: 40px;
left: 0px;
right: 0px;
}
.header-content {
max-width: 1400px;
margin: 0px auto;
position: relative;
background-color: white;
}
.app {
width: 100%;
height: 100%;
overflow-y: scroll;
}
I've never seen this happen before, and puzzled by why this happens.
How do I get the navbar to end right next to the scrollbar?
css
asked Nov 22 '18 at 11:11
AlexAlex
3,5491629
The navbar seems to be on top of the scrollbar (note the horizontal line), but I want it to end right next to the scrollbar.
.header {
position: fixed;
z-index: 102;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
height: 40px;
left: 0px;
right: 0px;
}
.header-content {
max-width: 1400px;
margin: 0px auto;
position: relative;
background-color: white;
}
.app {
width: 100%;
height: 100%;
overflow-y: scroll;
}
I've never seen this happen before, and puzzled by why this happens.
How do I get the navbar to end right next to the scrollbar?
css
css
asked Nov 22 '18 at 11:11
AlexAlex
3,5491629
asked Nov 22 '18 at 11:11
AlexAlex
3,5491629
edited Nov 22 '18 at 11:19
Alex
asked Nov 22 '18 at 11:11
AlexAlex
3,5491629
asked Nov 22 '18 at 11:11
AlexAlex
3,5491629
asked Nov 22 '18 at 11:11
AlexAlex
3,5491629
3,5491629
Is this the “normal” scrollbar applied to the whole document, or is this the scrollbar of an element inside the page that hasoverflowset …? Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 22 '18 at 11:13
@misorude the scrollbar belongs to.app, which covers the whole page
– Alex
Nov 22 '18 at 11:21
1
Well there’s your answer then … Your header is 100% wide (because of left and right 0), and.appalso is 100% wide - but the latter has a scrollbar shown inside of that 100% width. (This behaves differently only when the scrollbar is applied to the root element.)
– misorude
Nov 22 '18 at 11:26
add a comment |
Is this the “normal” scrollbar applied to the whole document, or is this the scrollbar of an element inside the page that hasoverflowset …? Please show a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 22 '18 at 11:13
@misorude the scrollbar belongs to.app, which covers the whole page
– Alex
Nov 22 '18 at 11:21
1
Well there’s your answer then … Your header is 100% wide (because of left and right 0), and.appalso is 100% wide - but the latter has a scrollbar shown inside of that 100% width. (This behaves differently only when the scrollbar is applied to the root element.)
– misorude
Nov 22 '18 at 11:26
Is this the “normal” scrollbar applied to the whole document, or is this the scrollbar of an element inside the page that has
overflow set …? Please show a proper Minimal, Complete, and Verifiable example.– misorude
Nov 22 '18 at 11:13
Is this the “normal” scrollbar applied to the whole document, or is this the scrollbar of an element inside the page that has
overflow set …? Please show a proper Minimal, Complete, and Verifiable example.– misorude
Nov 22 '18 at 11:13
@misorude the scrollbar belongs to
.app , which covers the whole page– Alex
Nov 22 '18 at 11:21
@misorude the scrollbar belongs to
.app , which covers the whole page– Alex
Nov 22 '18 at 11:21
1
1
Well there’s your answer then … Your header is 100% wide (because of left and right 0), and
.app also is 100% wide - but the latter has a scrollbar shown inside of that 100% width. (This behaves differently only when the scrollbar is applied to the root element.)– misorude
Nov 22 '18 at 11:26
Well there’s your answer then … Your header is 100% wide (because of left and right 0), and
.app also is 100% wide - but the latter has a scrollbar shown inside of that 100% width. (This behaves differently only when the scrollbar is applied to the root element.)– misorude
Nov 22 '18 at 11:26
add a comment |
1 Answer
1
active
oldest
votes
1
I think this can help you!
body {
overflow: hidden;
}
.app {
top: 40px;
position: absolute;
width: 100%;
height: calc(100% - 40px);
overflow-y: scroll;
}
answered Nov 22 '18 at 12:09
Maciej BlMaciej Bl
35612
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%2f53429680%2fwhy-does-navbar-appear-on-top-of-the-scrollbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I think this can help you!
body {
overflow: hidden;
}
.app {
top: 40px;
position: absolute;
width: 100%;
height: calc(100% - 40px);
overflow-y: scroll;
}
answered Nov 22 '18 at 12:09
Maciej BlMaciej Bl
35612
add a comment |
1
I think this can help you!
body {
overflow: hidden;
}
.app {
top: 40px;
position: absolute;
width: 100%;
height: calc(100% - 40px);
overflow-y: scroll;
}
answered Nov 22 '18 at 12:09
Maciej BlMaciej Bl
35612
add a comment |
1
1
1
I think this can help you!
body {
overflow: hidden;
}
.app {
top: 40px;
position: absolute;
width: 100%;
height: calc(100% - 40px);
overflow-y: scroll;
}
answered Nov 22 '18 at 12:09
Maciej BlMaciej Bl
35612
I think this can help you!
body {
overflow: hidden;
}
.app {
top: 40px;
position: absolute;
width: 100%;
height: calc(100% - 40px);
overflow-y: scroll;
}
answered Nov 22 '18 at 12:09
Maciej BlMaciej Bl
35612
answered Nov 22 '18 at 12:09
Maciej BlMaciej Bl
35612
answered Nov 22 '18 at 12:09
Maciej BlMaciej Bl
35612
answered Nov 22 '18 at 12:09
Maciej BlMaciej Bl
35612
35612
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%2f53429680%2fwhy-does-navbar-appear-on-top-of-the-scrollbar%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
Is this the “normal” scrollbar applied to the whole document, or is this the scrollbar of an element inside the page that has
overflowset …? Please show a proper Minimal, Complete, and Verifiable example.– misorude
Nov 22 '18 at 11:13
@misorude the scrollbar belongs to
.app, which covers the whole page– Alex
Nov 22 '18 at 11:21
1
Well there’s your answer then … Your header is 100% wide (because of left and right 0), and
.appalso is 100% wide - but the latter has a scrollbar shown inside of that 100% width. (This behaves differently only when the scrollbar is applied to the root element.)– misorude
Nov 22 '18 at 11:26