This is how I try to make the wrapper container scrollable over the footer element.
The footer should be fixed in the background, so it shouldn't move. I want to give the user the feeling he is moving the wrapper layer upwards to take a look at the fixed background footer.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
z-index: 0;
overflow-x: auto;
background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
background-size: cover;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
bottom: 0;
z-index: -10;
width: 100%;
height: 300px;
background: #555;
}
<div id="wrapper"></div>
<footer>This content should stay fixed on bottom of footer</footer>
For the fixed footer give position:fixed;bottom:0;
For parallax scrolling refer : Parallax
The edited code for you
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
z-index: 0;
overflow-x: auto;
background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
background-size: cover;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
bottom: 0;
z-index: -10;
width: 100%;
height: 300px;
background: #555;
position: fixed;
}
<div id="wrapper">
Test</br>Test</br>Test</br>Test</br>Test</br>
Test</br>Test</br>Test</br>Test</br>Test</br>
Test</br>Test</br>Test</br>Test</br>Test</br>
Test</br>Test</br>Test</br>Test</br>Test</br>
Test</br>Test</br>Test</br>Test</br>Test</br>
</div>
<footer>This content should stay fixed on bottom of footer</footer>
See the materialize fixed footer
Related
I have a website-slider where every section has height of 100vh. So each section is a slide. At the bottom of the website I need to have a simple footer. It works fine in all browsers but in Safari it kind of jumps because of overscroll.
Link to example
Gray div is an image which is outside my slider and is kind of behind all of the slides beacuse I need to change it's opacity on scroll. My footer is outside of slider as well.
<div class="section1">SECTION 1</div>
<div class="section2">SECTION 2</div>
<div class="section3">
SECTION 3
</div>
<div class="bg" style="background: gray"></div>
<footer>FOOTER HERE</footer>
CSS
* {
margin: 0;
padding: 0;
}
.section3,
.section2,
.section1 {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
z-index: 2;
background: #000;
color: white;
margin-top: 15%;
}
.section3 {
background: transparent;
margin-top: 0;
z-index: 10;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(bf34577….png);
background-repeat: no-repeat;
background-size: cover;
}
footer {
display: flex;
position: absolute;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 10px;
z-index: 9;
width: 100vw;
height: 65px;
object-fit: cover;
background: #000;
color: #727272;
}
So when overscroll is happening footer jumps up and behind it you can see an image which shouldn't happen.
It can be fixed if I give footer position: fixed and bottom: 0 but I don't need it to be position: fixed, I just need it to be at the bottom of the page.
My site has a div that scrolls up the page. It fills 100% of the screen, but for some reason there is a slight bit of horizontal scroll available and the background extends that extra bit.
I am attempting to get the div to match the width of the screen/background without any horizontal scrolling available. It is on the far right that the issue takes place.
HTML:
<body>
<div class="summaryPanel">
<p>Summary</p>
</div>
</body>
CSS:
body {
position: relative;
background-image: url(../images/trees.jpeg);
background-color: white;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: -2;
}
.summaryPanel {
position: absolute;
top: 10vh;
z-index: -1;
height: 100vh;
width: 100vw; // I also tried "100%"
background-color: #242A31;
border-top: 3px solid rgb(74, 74, 74);
}
You should try like this. Add a new class (wrapper) in place of body
*{margin:0;padding:0}
.wrapper {
position: fixed;
background-image: url(../images/trees.jpeg);
background-color: white;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: -2;
}
.summaryPanel {
position: relative;
top: 10vh;
z-index: -1;
height: 90vh;
width: 100vw;
background-color: #242A31;
border-top: 3px solid rgb(74, 74, 74);
}
<div class="wrapper">
<div class="summaryPanel">
<p>Summary</p>
</div>
</div>
I hope it will helps you.
$(document).ready(function(){
$(".summaryPanel").height($(window).height());
$(".summaryPanel").width($(window).width());
});
use jQuery to set the width and height of the div
I have not tested this but I think this will solve your problem...
body
{
margin: 0;
padding: 0;
width:100%;//if needed
height:100%;//if needed
}
#divID
{
margin: 0;
width: 100%;
height: 100%
background-color: red;//for test
}
100% is 100% of its parent, More Info here
I hope this helps.
Add to body tag
body{
overflow-x: hidden;
}
I am implementing a website which have a layout like below
I am a bit confuse about the HTML structure for this layout blue section is almost half divide my background and content will be centered and blue section will always be exactly divided in this ratio can anyone assist me how to make it possible. One more thing I need to use blue section as background color may be in RGBA.
A pseudo-element could work here
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-image: url(http://lorempixel.com/output/abstract-q-c-100-100-9.jpg);
}
body::before {
content: '';
position: absolute;
top: 0;
left: 50%;
height: 100vh;
width: 50%;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
.navbar {
margin-top: 25px;
height: 50px;
background: green;
border: 1px solid black;
}
<div class="navbar"></div>
Place this DIV after body tag:
<body>
<div id="blue"></div>
content
</body>
body {
background:url('img');
height:100%;
width:100%;
}
#blue {
position: fixed;
top: 0;
left: 50%;
background: rgba(0, 0, 255, 0.35);
height: 100%;
width: 1000px;
}
JSFiddle
html, body {
min-height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
}
#sidebar {
background-color: white;
height: 100%;
width: 20%;
float: left;
position: fixed;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
padding-bottom: 6em;
overflow-x: scroll;
}
The sidebar has a scroll which moves approximately 50px off the screen, please refer to image provided. I have tried using padding or margin on both body and #sidebar, to no avail.
Because you have no set height on #sidebar's container, 100% height will be auto. The scrollbar will be the size of it's container (#sidebar) so it will just stretch. Try something like this:
#sidebar {
top: 0;
bottom: 0;
}
You could also use window units:
#sidebar {
height: 100vh;
}
I'm using a sticky footer that will not stay down if i resize the window smaller and then scroll up. Also the image for my main wrapper is not scaling down proplery if i resize the window.
working url: http://www.nvcc.edu/home/ssuh/footer/index2.html
screenshot of problem - http://www.nvcc.edu/home/ssuh/footer/help.html
is there way to keep the footer on the bototm of the page until it hits my content?
html:
<body class="yui-skin-sam splash_asp">
<div id="parature_wrapper"> # this has a background image which does not
scale right
<div id="parature_content"></div> #this has a backgorund image which works.
</div>
<div id="footer"></div>
</body>
css:
*, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Verdana, Geneva, sans-serif;
background: url(background.jpg) no-repeat center top fixed;
height: 100%;
}
html {
height: 100%;
}
#parature_wrapper { /* wrap all of the content */
width: 960px;
margin: 0 auto;
position: relative;
background: url(topheader.png) no-repeat top left ;
height: auto;
min-height: 100%;
margin-bottom: -30px}
#parature_content { /* Main Page Content goes here. Left KB nav is included. */
position: absolute;
top: 166px;
right: 20px;
width: 630px;
background:url(content-bg.png) repeat;
font-size: 1.1em;
/*height: 5000px; */
padding-top: 20px;
padding: 20px;
}
#footer {
clear:both;
margin: 0 auto;
background: url(footer-bg.png) no-repeat ;
width: 918px;
bottom: 0;
position: relative;
height:28px;
border-top: solid 1px #a49a8b;
border-left: solid 1px #a49a8b;
border-right: solid 1px #a49a8b;
}
You could see/use Ryan Fait's sticky footer:
http://ryanfait.com/sticky-footer/
#footer's height: 30px
#parature_content's top: 165px
Maybe you should set #parachute_content > .push's height to (30+165)px to adapt to the relative positioning of the content area.
You need to use position:fixed for your footer.
Here's a good resource for you: https://developer.mozilla.org/en/CSS/position