Current my page has a menu bar and iframe section to load the items in the menu bar when clicked. I wanted the iframe to scroll but not the parent page (i want the menu bar fixed to the top).
But the parent page scroll as well. So I set position: fixed for the parent page, the Content below can only be scrolled to a point and will eventually be cut off (see image below). How do I resolve this issue?
Here is a way using display: table, flex would be another way.
html,
body { height: 100%; margin: 0 }
.container {
display: table;
width: 100%;
height: 100%;
}
.page-row {
display: table-row;
height: 0;
}
.page-row-expanded {
height: 100%;
}
main iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
.header {
background-color: #bbb;
padding: 10px;
}
<div class="container">
<header class="page-row">
<div class="header">
Navigation bar
</div>
</header>
<main class="page-row page-row-expanded">
<iframe src="http://www.w3schools.com/"></iframe>
</main>
</div>
I dont know if its more complicated because of
position:fixed;
but have a look over here: Scroll Down iFrame - jQuery/JS
Related
I want to make my page scroll normally and stop and fix on a certain point, then scroll div, and after div is completely scrolled continue scrolling body as usual.
I've tried to disable scrolling of the page and work with the wheel event, adding margin top to my content, but it doesn't seem to be a good solution.
Example of what i want https://aimbulance.com/ilayaregeneration
Thanks!
Your example is not locking the scroll to the div, but masking the entire page and using position: sticky in order to achieve that.
SOLUTION
A possible solution is to make the div you want to be scrolled a container with position: relative that holds a masking element with position: absolute that covers the entire div and contains a mask that will be position: sticky with top: 0.
check out this example:
https://codesandbox.io/s/scrolled-div-jqw7z
Use overflow-y
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
display: flex;
justify-content: center;
/* this is the usage */
overflow-y: auto;
}
#inner {
/* this height is larger than the parent */
height: 1200px;
width: 33%;
background: radial-gradient(circle, black, white);
overflow-y: auto;
}
#section3 {
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main" id="section1">
</div>
<div class="main" id="section2">
<div id="inner"></div>
</div>
<div class="main" id="section3">
</div>
</body>
</html>
So I have a vertical page divider that is used multiple times on a page, it is a div within a div, on the page scroll, I would like the inner div to scroll with the page and then stop when it reaches the end of the parent div.
Any ideas?
Simple HTML
<div class="verticalscroll">
<div class="verticalscroll_bar"></div>
</div>
CSS
.verticalscroll {
width: 3px;
height: 335px;
background: #D8D8D8;
margin: 80px auto 0;
}
.verticalscroll_bar {
width: 3px;
height: 100px;
background: pink;
}
I appreciate the help!
Fixed it... simple really!
Adding this CSS to .verticalscroll_bar
top: 200px;
position: -webkit-sticky;
position: sticky;
Heres an image of my website right now: http://i.imgur.com/nE0a0cj.jpg
The section says "What is Spheroid" is ment to be my content container. However, I can't seem to make it go from the header to the footer.
My HTML code:
<div id="container">
<h2>What is Spheroid?</h2>
</div>
My CSS Code:
html, body {
background-image:url(001.png);
background-size: 100%;
background-repeat: no-repeat;
height: 100%;
}
#container {
width: 800px;
height: 100%;
text-align: center;
margin: 0 auto;
background-color: #38788E;
}
I've tried using the "height: 100vh;" property, but it makes the container go beyond the footer so the page needs to be scrolled.
Also think it might have to be done with JavaScript, but that's a field where I'm going to need some support.
Thank you guys in advance :)
EDIT -
So I figured from one of the answers, that my div was inside another div. So I fixed this, and with the same code as provided it not looks like this: http://i.imgur.com/vYRVqhN.png
Thought it might have been the bg size, but as it is only set to "cover" it shouldn't be the issue.
Finally got your requirement, flex box layout is your friend.
View the demo in full page mode:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
flex: 1;
width: 800px;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
Another approach with box-sizing:
html, body {
height: 100%;
margin: 0;
}
body {
box-sizing: border-box;
padding-bottom: 70px;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
width: 800px;
height: 100%;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
It seems like you placed your <div id="container"> inside another div or any parent element (except html and body). If so, the parent element/s don't have a height of 100%. If you add height:100%; to the parent element your container must fill the entire height of the parent element.
I tested your code provided and it's working.
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.
I tried many tutorials on the web, tried javascripts but nothing worked for my footer. I simply want it to stick to the bottom. If I fix it in a page where the content go below the screen the footer won't work in a page which have content within the screen size. If I fixe one the other breaks. How can I fix this?
In this page the footer is correct : http://fast-garden-6871.herokuapp.com/logs
In this page its in the midle of the screen (you have to scroll) : http://fast-garden-6871.herokuapp.com/delegates
Please help!
Add this CSS Code:
.wrapper {
display: block;
}
Add this css
footer {
position: fixed;
bottom: 0;
width: 100%;
}
if your footer is the last element in your html, why don't you try...
body
{
padding-bottom: 0;
margin-bottom: 0;
}
footer
{
margin-bottom: 0;
}
or if the whole thing is wrapped in a .container div then do this instead:
.container { margin-bottom:0; }
try the simple code:
html file:
<div id="header"> Your header </div>
<div id="body"> Your body .. </div>
<div id="footer"> Your footer </div>
css file:
#header {
background-color: blue;
}
#body {
background-color: green;
min-height: calc(100vh - 18px - 200px); /* calc(100vh - {{use inspect for height of header}} - {{height of footer}}*/
}
#footer {
height: 200px;
background-color: red;
}