I'm creating image slider, it's contains in big, 100% x 100%, absolute positioning popup div. And I need to block body scroll when slider is active. I tried overflow: hidden for body tag, in js - and it's not working, thereon I tried it in style.css, result was the same.
body {
position: relative;
overflow: hidden;
display: block;
}
So how to lock scroll for all page by css resources?
Use fixed positioning on your image
#myImage
{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
}
Related
I cannot get the images on the right of the slider to overlay the following div underneath it. I've used a variety of different position and z-index variables and cannot get it to work.
Live Site
What I'm using for slider images:
.overlay-img{
position:absolute;
right:0;
z-index:9999;
top:-300px;}
What I'm using for the following div (underneath):
.lower-stack{
position:relative;
z-index:1;}
Effect I'm trying to achieve (image). Any help appreciated. What am I missing?
The swipper's outer most wrapper was having overflow: hidden, which prevent child content from being visible outside its boundaries.
.swiper-container {
margin: 0 auto;
overflow: hidden;
position: relative;
z-index: 1;
}
You can consider adding an id to that particular container, and make it overflow: visible:
#newID{
overflow: visible;
}
When you do that, slides start showing to the right side of the page and a horizontal scroll bar appear. To fix that, add overflow: hidden to .mainContent:
.mainContent{
overflow: hidden;
}
Don't set z-index: 9999 to the image, it is not needed.
On mobile devices when a position:fixed; element appears on the screen the user can scroll the <body>, through the fixed element.
body,
html{
overflow: hidden;
margin: 0;
padding: 0;
}
#fixed {
background: red;
position: fixed;
left:0;
top: 0;
width: 200px;
height: 100%;
}
#content {
background: blue;
height: 3000px;
}
I tried to add overflow:hidden for <html> and <body> but it didn't help. I would like to prevent scrolling through the fixed element, but I would like to allow the scroll, when the fixed element is visible, but the user scrolls on <body>.
I tried this with ios and android devices. What is the best solution to solve this?
background:fixed
will make the rest of the body scroll through the fixed element. That is is the default behaviour. By the looks of it, you want the fixed element to be positioned at the top of your page. Why not keep it is a separate container with position absolute and rest of the body in a different container. Then, add the scroll to the rest of the body keeping HTML, body at 100% height. you may need to keep the height fixed for the 2nd container.
My problem is that I have a web page with a footer. I would like the page to extend the footer to the bottom of the browser window if there is not enough content to fill the entire page. I would also like the footer to go to the very bottom of the page when the content exceeds the height of the browser and there is a vertical scroll bar.
For some reason I cannot get this to work, I followed the tutorial on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
and the tutorial specifically says it does what I want-
"On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space."
When I follow the tutorial it successfully puts the footer on the bottom of the page when there is not enough content to fill the page, but when there is more than enough content the footer is prematurely placed where the browser window initially ends because the body's and the everything container's heights are set to the height of the window as opposed to the height of the entire page (height of page with with scrolling).
the div organization is as follows:
<div class="everything">
<div class="main_content"></div>
<div class="template_footer"></div>
</div>
My CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
.everything{ //main container
width:100%;
min-width:960px;
max-width:1450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
}
.main_content{ //body container
width:100%;
position:relative;
float:left;
}
.template_footer{
width:100%;
height:44px;
background-color:rgba(0, 0, 0, .5);
position:absolute;
bottom:0;
}
I've also tried a bunch of different variations with height and nothing works correctly, I've searched through other questions and they don't seem to answer this problem specifically.
The footer is absolute positioned to the bottom of the .everything container.
So no matter the content, the footer will be covering the bottom 44 pixels of your container.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}
the main section padding-bottom should be bigger than the height of the footer. The footer section has to be position absolute. The whole page should be min-height 100%.
This div below is causing the page to scroll horizontally on smaller then 1450px browsers. I thought overflow would fix this issue, but does not appear to... may be something I need to do on the parent div's. Any ideas?
http://barr-display.mybigcommerce.com/
#Header {
position: relative;
clear: both;
width: 1450px;
min-height: 190px;
overflow: hidden;
background: url('/content/headerbg3.jpg') repeat-x;
}
On body you need the following
body {
width:100%;
overflow:hidden;
}
The reason your code is not working is that you're setting overflow on the child(#header) when it needs to be set on the parent.
Looks like you want three things:
No scrollbar when header image is cut off.
YES to scrollbars when main page content is cut off.
Ability for your header background to extend to the right if the browser window is wide.
You really needed to post more of the relevant code here. However, I look at your site, and this'll fix it:
Change your rule for #outer:
#Outer {
clear: both;
margin: 0 auto;
min-height: 190px;
width: 1024px;
}
Remove the margin and width rules from #outer's parent, and replace with width:100%;overflow-x:hidden;
Add these lines to your css:
html, body {
width:100%;
}
body {
overflow-x:hidden;
}
You need overflow-x so the vertical scroll bar doesn't disappear.
Also, remove overflow: hidden; from the #Header.
I've have tried this:
body {height: 100%;overflow: auto; body #cornerImage {position: absolute;bottom: 0;}
and this:
{ margin:0; padding:0; }
html, body {
height: 100%;
overflow:auto;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
bottom: 0;
}
Neither of these have worked. It seems like the position I am wanting is working, but the problem is there a giant margin pushing my content down. Am I on the right track with this? Or is this not the fix I should be trying?
IE6 simply does not support position fixed. It's been a hassle many web developers have had to live with. I've used two alternatives:
Put the scrollable portion of my content in a separate 100% width/height DIV with overflow: scroll. Then overlay my non-scrollable "fixed" element in a separate div with a greater z-index.
Do what Yelp does with the map on the sidebar and reposition the element with Javascript every time the user scrolls.