How to prevent a div with position: fixed to stay in the outer div and prevent it from overlapping to the footer of the website.
For example, I have a div, and I want to scroll the div within the content div between the header and footer sections and not move from the div outside the content.
My code for this:
HTML
<div id="fixed_div"></div>
CSS
#fixed_div {
background: none repeat scroll 0 0 #F1F1F1;
padding: 10px;
position: fixed;
width: 290px;
z-index: 99;
}
There is a plugin for jQuery called Waypoints. It allows you to detect when an element has been scrolled to. http://imakewebthings.com/jquery-waypoints/
$('.footer').waypoint(function(direction) {
$('#fixed_div').hide();
});
Its API is quite helpful and should be able to suit your needs.
You can use overflow:scroll. If your content get overflowed from inner div it get scroll automatically.
Related
This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.
I am setting a footer and I want it to be fixed at the bottom even if I am at the top of the page the footer is still visible
I tried using position: fixed , flex
But none of them worked
footer
{
margin-bottom:0px;
background-color: black;
background-color:rgb(11,132,69);
color: white;
}
<footer class="container-fluid text-center">
Some text
</footer>
you got to have a lot of content that is first of all scrollable and then give your footer div the following properties:
CSS
position: fixed;
left: 0;
bottom: 0;
One small note is that you got to have some content inside the footer HTML element in order for it to even render I provided the following text A Footer! (shown in the example below)
Other than giving a position: fixed you need to guide the div where to be fixed it. Its default is to be fixed top left I believe. So to have it fixed to the bottom you can add left: 0 and bottom: 0 to have it behave as you desire.
Code Playground Example
I made a small example for you to check out that is working feel free to play around here It looks like this and as you can see the scroll handle is midway through the scroll track marked in red while the footer is fixed to the bottom as you wanted it to.
Demo
One Small Note
position: fixed is what you desire. It will fix the divs position without being dependent on scroll event. position: sticky is a sort of combination of position: relative in default that in turn will shift to become position: fixed when you scroll down enough and the div will then be fixed.
- position: sticky is currently experimental and not supported in IE.
You can set footer fixed to bottom of the page no matter how much content is available in your page. The footer will remain at the bottom of your browser window by using below given css code.
footer {
position: fixed;
bottom: 0;
}
I have a two column layout, where the left side consists out of a menu that should stick and the right side contains a long form. On the bottom of the page is a footer:
There are two problems with this:
If the browser window is smaller then the menu height, it is not possible to see the lower menu items as it is fixed and therefore does not scroll.
If one scrolls down the form to the bottom, the menu will hide the footer
My CSS looks like this:
#menu_side{
color:black;
background-color: #ffffff;
margin:67px 5px 5px 5px;
position: fixed;
width: 250px;
}
As an alternative mentioned inside the comments, one could use a container for the menu and use vh. Unfortunately this seems not to work as the inner elements simply outgrow the div. Illustrated in this img with a red border for the container:
How could I manage to keep the menu in sight of the user while he scrolls down the form and in the same time solve the mentioned 2 problems? Thank you for any help on this.
You should wrap #menu_side in a new container and let that container be fixed and make sure its height equals the viewport height. This can be done with vh units or with Javascript.
<div class="menu_container">
<div id="menu_side">
<!-- your menu -->
</div>
</div>
CSS:
.menu_container{
position: fixed;
height: 100vh;
width: 260px;
left: 0;
top: 0;
}
#menu_side{
margin:67px 5px 5px 5px;
}
As for your second issue: This can best be achieved using Javascript. You could for instance calculate the visible height of the footer element and use Javascript to calculate the appropriate height for .menu-container
I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.
this is the most stupid question here on stackoverflow...
My client would like to have always visibile sidebar in all pages of his website..
Some pages have scrolling, other no, so he see logo and element jump position from one page to another of the scrollbar width ...
so... there is a way to "lock" the scrollbar space, so the he don't see "jump" form one page to another?
thank you
html {
overflow-y: scroll;
}
forces the scrollbar to be shown always
use fixed position:
#sidebar {
position: fixed;
top: 10px;
left: 10px;
}
With the above, the container div will always stay 10 pixels from the top and left of the browser window. So when the page scrolls, it will not move.