I'm using an example code for a fixed navbar provided by bootstrap. Is there any relatively easy way to make a browser scrollbars not overlap a fixed navbar.
Here is how it is in example:
Here is what I'm trying to get:
Thanks a lot in advance.
Regards.
In order to do this, you'll need to make your header a fixed element at the top of the page and use a position: fixed container to wrap the rest of the content on your page. Here is an example:
CSS:
html, body {
width: 100%;
height: 100%;
}
#header {
position: fixed;
width: 100%;
height: 50px;
top: 0;
}
#container {
width: 100%;
position: fixed;
top: 50px;
bottom: 0;
overflow: auto;
}
HTML:
<body>
<div id="header">
<ul><!-- other header elements --></ul>
</div>
<div id="container">
<!-- All of the content of your site -->
</div>
</body>
Related
Let me first try to illustrate the problem
I have a webpage which contains a header and a sidenav. The sidenav is fixed in css, since I don't its content to move when scrolling.
When the page isn't scrolled down it works as intended, somewhat like this
However when I scroll i don't want whitespace on top of the sidenav. Currently when I scroll down the page, it looks somewhat like this
The intended behavior should be something like this
How do I go about this in css? Do I mess with the z-index of the elements? so the sidenav is behind the header when the page isn't scrolled? Or do I dynamically add to the sidenav's size when scrolling?
And how would either of these options be done in css?
As I understand, you have to set z-index of the header higher than the sidenav
Stack Snippet
.header {
height: 100px;
background: #000000;
position: relative;
z-index:999;
}
body {
margin: 0;
}
.sidebar {
position: fixed;
left: 0;
top: 0px;
width: 100px;
background: red;
height: 100%;
padding-top:100px;
}
.content {
height: 1000px;
background: yellow;
}
<div class="header"></div>
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
In my website I have two main divs - one for the banner at the top, and one for the main content. They both contain inner elements like imgs, iframes etc. but I don't think this is important for my problem which is: how can I make the scroll bar for the main content not overlap the banner?
If it helps, you can view the source for my actual website on my github. But to save wasting time looking, I've wrote a small snippet in html which demonstrates this issue:
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);
html, body {
margin: 0;
padding: 0;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
It may be hard to see, in the snippet here on SO but the scroll bar on the right overlaps the banner and I what I want is for it to stop when it reaches the banner.
I have tried (in the CSS) setting the overflow of the body to hidden as this is the scroll bar overlapping the banner, but this just removes it entirely so I can't scroll - so clearly not what I am looking for...
I have also tried setting the overflow-y of the main div to scroll, but this does not work as a bar does appear where I want it, but it is grayed-out so not usable.
I have created a fiddle for you:
https://jsfiddle.net/3gvowvag/1/
Your HTML and JS stays the same. For your CSS:
html, body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
position: absolute;
top: 100px;
max-height: 100%;
width: 100%
overflow-y: scroll;
}
So the changes are basically to give your html, body a overflow-y: hidden and your #main a max-height and width of 100% as well as overflow-y: scroll.
This basically does what you want - though I wouldn't be 100% confident about setting up the page like that. Absolute positioning and offsetting via pixels is a bit oldschool, also setting the overflow-y to hidden for html/body, not exactly sure how those things will behave in the long term. But pretty hard to fully think of this without further context.
P.S.: awesome cat!
You just need to add overflow-y: hidden; to the body (take a look at this previous answer) and then apply overflow-y: scroll; to the #main div.
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(30);
html, body {
margin: 0;
padding: 0;
}
body {
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
overflow-y: scroll;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
You might find this easier with a flexbox layout. Maybe something like this. As example set the overflow to auto if you don't want to see the greyed out scroll bar
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
content
content
content
</div>
</div>
.wrapper{
display:flex;
flex-direction:column;
background:blue;
height: 100vw;
}
.header{
height:100px;
background-color:pink
}
.content{
background:green;
flex-grow: 1;
overflow:scroll;
}
I am trying to setup an HTML document that has a fixed position header bar that will contain all of the menu options for the app; The bar should be fixed to the top of the page. The actual content portion of the bar should have a minimum width of 1000px and should be contained within a wrapper that will fill all remaining space if the page with is >1000px, leaving the content portion centered within.
I have been able to do the following, using a display: fixed I can get the bar to stick to the top of the page when scrolling verticaly, but if the page is <1000px, horizontal scrolling does not reveal the rest of the bar, it sticks to its fixed 0,0 position.
Changing to display: relative, The bar behaves as expected when scrolling horizontally - I can see the right half of it - however this does not allow it to stay fixed to the top of the document when scrolling vertically. How can I adjust the following such that the bar behaves in this way.
HTML:
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Navigation -->
<div id="nav_wrapper">
<!-- Navigation Wrapper -->
<div id="nav_content">
<!-- Navigation Title -->
<div id="nav_title">
some content
</div>
</div>
</div>
<!-- Body -->
</div>
Navigation Bar css:
#wrapper {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 150%;
min-width: 1000px;
}
#nav_wrapper {
display: block;
position: fixed;
width: 100%;
height: 48px;
top: 0px;
left: 0px;
min-width: 1000px;
}
#nav_content {
display: block;
position: relative;
top: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
Again, setting the nav_wrapper display style to fixed allows me to scroll vertically with the bar sticking to the top but does not allow me to scroll horizontally to view overflow content,
Setting it to relative allows me to scroll horizontally to view the overflow content of the bar but does not allow the bar to stick to the top of the page when I scroll vertically, I am looking to be able to do both.
Any and all help is greatly appreciated. Cheers.
Here is something working on jsFiddle
Edit
Maximillian posted an excellent working example with the behavior I am hoping to achieve, however using javascript. I am looking for a pure HTML / CSS solution if possible.
I'm pretty sure that you can't get fixed position divs to scroll along with the window by using pure HTML and CSS, so here is a JavaScript solution.
Live Demo:
var nav_wrapper = document.getElementById("nav_wrapper");
window.onscroll = function() {
nav_wrapper.style.left = -pageXOffset + "px";
};
#wrapper {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 150%;
min-width: 1000px;
background: gray;
}
#nav_wrapper {
display: block;
position: fixed;
width: 100%;
height: 48px;
top: 0px;
left: 0px;
min-width: 1000px;
background: blue;
}
#nav_content {
display: block;
position: relative;
top: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
background: red;
}
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Navigation -->
<div id="nav_wrapper">
<!-- Navigation Wrapper -->
<div id="nav_content">
<!-- Navigation Buttons -->
<div id="nav_main">
Buttons
</div>
<!-- Navigation Title -->
<div id="nav_title">
Title
</div>
<!-- Navigation Options -->
<div id="nav_options">
Options
</div>
</div>
</div>
<!-- Body -->
</div>
JSFiddle Version: https://jsfiddle.net/2j2mx5mu/
Let me know if this fixes your issue:
https://jsfiddle.net/nkf00r7L/4/
I changed the following css:
#wrapper {
display: block;
top: 0;
left: 0px;
width: 100%;
height: 2000px;
min-width: 1000px;
background-color: #DDDDDD;
}
#nav_wrapper {
display: block;
position: fixed;
width: 100%;
height: 48px;
top: 0px;
left: 0px;
min-width: 1000px;
background-color: #000000;
}
Updated:
I noticed you wanted it to scroll horzontally!! I've added overflow: scroll on the wrapper.
https://jsfiddle.net/nkf00r7L/5/
Im trying to get a footer to stick to the bottom of my webpage but it floats only half way up. I've looked at a few examples and I cant see what im doing wrong. Any assistance would be greatly appreciated. My simplified code is shown below.
<html>
<head>
</head>
<body>
<div id = "wrapper">
<!--Wrapper div for the main content-->
</div>
<!--Footer container-->
<div class="footer">
</div>
</body>
</html>
--CSS--
body
{
height: 100%;
margin: 0;
padding:0;
background-color: #1A1F2B;
min-width: 960px;
}
#wrapper{
min-height: 100%;
}
.footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
display: block;
background-color: #232A3B;
}
If you want it to be at the bottom of the document:
.footer {
position: absolute;
bottom: 0;
}
If you want it to be at the bottom of the viewport:
.footer {
position: fixed;
bottom: 0;
}
If you'd like the footer div to be on the bottom of the page and span the entire width this would work:
.footer {
position: absolute;
bottom:0;
height: 150px;
width: 100%;
background-color: #232A3B;
}
HTML5 also supports the <footer> Tag which may make it easier for bots to process the information on your webpage. To change that just use footer { instead of .footer { and change the HTML markup.
I am currently building a website at http://grapevineiow.org/m_inspireblog.html. This website has a header and footer. The page I have linked to above features a blog in an iframe. Clearly the blog is far too long to fit into the page as one continuous piece of content, so scrollbars are required.
However, this is where there is a problem. I want to keep the scrollbars on the blog (so users can scroll through it), but I want the page to fill the window exactly, so the header and footer take up the minimum space needed. The header is fine, but the footer is being a problem.
I have tried:
Setting the height of the body and html to 100% in CSS.
Setting the height of the content to 100% in CSS, but that made the content fill the window.
Styling the footer as height:auto 0 in CSS.
...but none of these have worked.
I would like to be able to solve this problem using just CSS if possible, but I'm open to using HTML if needed. I would like to avoid Javascript.
Thank you in advance.
If you know the heights of the header and footer, you can achieve this by setting both top and bottom on the middle area like this:
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#header{
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #f09;
}
#content{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
background: #f90;
}
#content iframe{
width: 100%;
height: 100%;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #90f;
}
</style>
<div id="header"></div>
<div id="content">
<iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>