Footer creating vertical scroll bar issue - html

I have managed to get my Footer to go to the bottom of my page, but for some reason it has created a Vertical Scroll Bar on my pages which I don't want it to do.
This is my page layout at the moment (HTML):
<div class="wrapper">
<div class="Header">
</div>
<div class="Main">
</div>
<div class="Footer">
</div>
</div>
And this is the CSS that goes with this:
.wrapper
{
position: relative;
min-height: 100%;
}
.Header
{
height: 83px;
border: 0;
}
.Main
{
padding-bottom: 100px;
}
.Footer
{
background: #6a3d98;
position: absolute;
bottom: 0px;
height: 55px;
width: 100%;
}
Here is a small picture of what happens:
http://i.stack.imgur.com/Kgams.jpg (Have to post link as won't let me upload pic)
I want the Footer to be stuck to the bottom of the page but not to create the scroll bar. If anyone knows how to do this please comment, Thanks.

Add overflow:hidden on the wrapper element.

Related

Sticky Div inside HorizontalScrollView

Im building a website based on a Horizontal Scroll View, this is made by an move interaction and a sticky section. Inside this sticky section i want to put an sticky div,then, when you scroll horizontaly, one div remains sticky meanwhile you scroll horizontally.
There is an example:
https://studiochevojon.com/
In this website you can horizontal scroll and have a sticky div in determinate moment.
There is my webflow project: https://preview.webflow.com/preview/designfeelings?utm_medium=preview_link&utm_source=dashboard&utm_content=designfeelings&preview=1bd0bbb81feac58ef0d75e3ee82d61d0&mode=preview
Can someone explain me how this works? I try all horizontal scroll tutorials but i dont know how to make this works.
Thank you all.
to be sticky a div needs the style: position: sticky;. Then it needs a broder where ti actually should stick to (top, bottom, left and/or right) and the distance (%, vw/vh, px...). Like in this example
body {
margin: 0;
padding: 0;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 500vw;
display: flex;
background-color: red;
}
.page {
width: 100vw;
padding: 5px;
}
#one {
background-color: yellow;
}
#two {
background-color: green;
}
#three {
background-color: grey;
}
#sticky {
display: flex;
position: sticky;
left: 0;
width: 100vh;
background-color: blue;
padding: 5px;
}
<div id="wrapper">
<div class="page" id="one">I'm page 1</div>
<div class="page" id="two">I'm page 2</div>
<div id="sticky">I'm the Sticky Box</div>
<div class="page" id="three">I'm page 3</div>
</div>

How to eliminate whitespace when scrolling [fixed sidebar]

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>

Issues with HTML and CSS header bar layout

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/

How to set Div to appear behind another div on scroll?

I have a navigation bar under a header div tag
and a slideshow div afterwards ... as the code shows
<div class="header">
<div id="navbar">
content
</div>
</div>
<div class="container">
<div class="slideshow" id="slideshow">
slideshow content
</div>
</div>
the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?
CSS styles
.slideshow {
position: relative;
margin-bottom: 10px;
padding: 50px 0 0 0 ;
}
Different CSS sheet for header and navbar
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
}
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
apparently I just needed to add a z-index to the header, completely overlooked it
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
z-index: 1;
}

Half fixed, half scrollable layout that can be scrolled... CSS

I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.
I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page
How would one attack such a layout?
Thank You.
Could not post code before - let me try again:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Clarification:
My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)
Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.
Thanks again.
To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below
Fiddle
http://jsfiddle.net/moby7000/tWb3e/
Its not very hard to create a layout like this.
I created one for you, see that Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>The Header div height is not fixed (But he can be if you want it to)</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
</div>
<div class="Content">
<div class="Wrapper">
<div class="RightContent">
<p>You can fix the width of this content.</p>
<p>if you wont, his width will stretch just as it needs to.</p>
</div>
<div class="LeftContent">
<p>this will scroll</p>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
Bonus:
with a little change in the CSS, you can create a beautiful scrolling.
See that Fiddle
Edit:
If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it that way.
<div class="LeftContent">
<div style="width:1200px;"> <-- better to aplly the width from the CSS
..<The content>..
</div>
</div>
you need to add overflow:auto; to the area you want to scroll.
Have you tried
overflow-y: scroll;
in body?