Position: sticky with bottom:10px on div with class sidebar is working as expected but with property top:10px is not working as expected?
With position: sticky with bottom: 10px on div with class sidebar, when we scroll down the div stick to view port with a bottom edge above 10px to the view port.
Similarly with position: sticky with top:10px on div with class sidebar, as we scroll up the div should stick to top with the top edge of div 10px below the viewport.
But it is not working this way, what is the problem?
code: https://jsfiddle.net/c7vxwc7g/
.container{
/*width: 1654px;*/
width: 100%;
background-color: #f0f0f0;
margin: 0 auto;
}
.sidebar{
position: sticky;
bottom: 10px;
width: 400px;
margin: 5px;
background-color: teal;
height: 1000px;
display: inline-block;
}
.mainpage{
width: 1130px;
margin: 5px;
margin-left: 0px;
background-color: steelblue;
height: 6000px;
display: inline-block;
}
.footer{
height: 500px;
width: 1654;
margin: 0 auto;
margin-top: 10px;
background-color: purple
}
.test1{
background-color: red;
position: relative;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2{
background-color: red;
position: relative;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<body>
<div class="container">
<div class="sidebar">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
<div class="mainpage">mainpage</div>
</div>
<div class="footer">footer</div>
</body>
In my case, the parent of the sticky element (the sidebar) had a smaller height than the content => the sticky element wasn't going down more than the sidebar's height.
The solution: I made the sidebar's height equal to the content's height (using display flex on the content's and sidebar's wrapper).
HTML:
<div clas="container">
<div class="content">This initially has a bigger height than sidebar.</div>
<div class="sidebar">
<div class="sticky"></div>
</div>
</div>
CSS:
.container { dislay: flex; } // By using this I make the sidebar the same height as the content
.sticky { position: sticky; top: 0; }
Related
I need to draw a div with height of entire document. An id named "background" should have the height equal to the content. I am trying to get the result by getting the scrollHeight. I already know the height from the code below but I don't know how to put the value into css. Thank you in advance for any help!
document.getElementById("background").text = ("scrollHeight : " + $(".demo").prop("scrollHeight"));
.content {
background: #eee;
width: 100%;
height: 2000px;
}
#background {
width: 200px;
background: #000;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
<div id="background"></div>
<div class="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
One way is to use getComputedStyle
document.querySelector('#background').setAttribute('style','height:'+ window.getComputedStyle(document.querySelector('.content')).getPropertyValue('height'));
.content {
background: #eee;
width: 100%;
height: 2000px;
}
#background {
width: 200px;
background: #000;
position: absolute;
top: 0;
left: 0;
/*height: 200px;*/
}
<div id="background"></div>
<div class="content"></div>
To have the same height for the background every time you change the content height it has to be a child of content.
And for the background set the height to inherit
.content {
background: #eee;
width: 100%;
height: 2000px;
}
#background {
width: 200px;
background: #000;
position: absolute;
top: 0;
left: 0;
height: inherit;
}
<div class="content">
<div id="background"></div>
</div>
Hope I could help you.
document.getElementById("background").style.height = <get .content height>
https://www.w3schools.com/jsref/prop_style_height.asp
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 2 years ago.
html {
height: 100%;
}
body {
height: 100%;
background-color: var(--main-bg2-color);
}
.wrapper {
position: relative;
width: 100%;
height: auto;
margin-top: 55.6px !important;
display: grid;
grid-template-columns: 17% 50% 30%;
column-gap: 15px;
}
.left-side {
background-color: var(--main-bg2-color);
color: var(--main-text-color);
height: 100%;
padding-top: 41px;
padding-left: 0;
position: sticky;
top: 55px;
}
.middle-side {
padding-top: 40px;
background-color: var(--main-bg2-color);
color: white;
height: auto;
}
.right-side {
padding-top: 40px;
padding-left: 0;
background-color: var(--main-bg2-color);
height: auto;
position: sticky;
top: 55px;
}
<nav>
</nav>
<div class="container">
<div class="wrapper">
<div class="left-side">
</div>
<div class="middle-side">
</div>
<div class="right-side">
</div>
</div>
</div>
</div>
<footer>
</footer>
I want the left side class div and right side class div to be sticky and middle content should be scrollable while scrolling down so I have used position sticky to left side class and right side class. But the position sticky is not working.
add this
// chrome
position: -webkit-sticky;
// firefox
position: -moz-sticky;
// IE
position: -ms-sticky;
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
Here is my tricky problem. I'm trying to do this:
http://www.hostingpics.net/viewer.php?id=767312test.gif
(More clear than an explication I think).
My structure :
<header></header>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img1.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img2.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img3.png"/></div>
</div>
<footer></footer>
Important informations :
"Header" is fix
"Content" fit to the screen less the height of header
Every "section" are the same but with different content
When the image comes to an end, the "content" div is unfixed.
I am using "section" for implementing a next and previous button in the header (with anchors).
My problem is the scrolling part. I am really lost when I try to fix the "content" div. I don't know how to fix everything except the scroll of the image in the active "img" div when the active "content" div hits the header. (Everyone follows? Look here : http://www.hostingpics.net/viewer.php?id=767312test.gif
For the scrolling part in the "img" div, I was thinking use a sort of "overflow:scroll" but the scrollbar is really awful.
I don't know if it's enough clear. If there is any problem I can complete my problem. I am not very comfortable with complex structures in html with JS.
Thanks for your help!
This is pretty close to what you're asking for (using CSS only).
This relies on the fact that the backgrounds are solid colors. It uses various specifically-defined height properties as well that match some padding properties.
The .top-bar and .bottom-bar elements can probably be changed to pseudo elements if you don't want the extra HTML.
HTML:
<header>Header</header>
<div class="top-bar"></div>
<div class="bottom-bar"></div>
<div class="section">
<div class="text">Section 1 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/100/1000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 2 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/200/2000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 3 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/300/3000"/></div>
</div>
</div>
<footer>Footer</footer>
CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
z-index: 5;
}
.top-bar {
top: 100px;
}
.bottom-bar {
bottom: 0;
}
footer, .text {
position: relative;
z-index: 6;
}
JSFiddle here.
For an almost completely correct solution, here is one with some jQuery involved.
New CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
}
.top-bar {
top: 100px;
z-index: 5;
}
.bottom-bar {
bottom: 0;
z-index: 7;
}
footer, .text {
position: relative;
z-index: 8;
}
.img-fix {
bottom: 40px;
height: 400px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 6;
}
jQuery:
$(document).ready(function(){
$(".content").each(function(){
$(this).append($(this).html());
$(this).find(".img + .img").wrap("<div class='img-fix'></div>");
});
$(window).resize(function() {
resizeImgFix();
});
resizeImgFix();
});
function resizeImgFix() {
$(".img-fix").height($(window).height() - $("header").height() - $(".top-bar").height() - $(".bottom-bar").height());
$(".img-fix").each(function(){
$(this).scrollTop($(this).prop("scrollHeight"));
});
}
JSFiddle here.
Note: It duplicates the .img element and its children. This could be memory intensive depending. However, it does make it work as intended without any visual lag or artifacts.
I have a div positioned at the top of the body and another div positioned at the bottom of the body
Now I want to place a div between those two divs and have its height take the max space available between those two divs.
The vertical space between those two divs is not fixed, meaning that when the user decreases/increases the height of the window, I want the middle div to readjust its height accordingly.
More specifically :
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
<div style="float: left; height: 50px, width: 200px; background-color: green;"/>
<div style="float: left; height: ???? ; width: 200px; background-color: red;"/>
<div style="float: left; height: 50px, width: 200px; background-color: blue;" />
</div>
</body>
So basically imagine a green rectangular fixed at the top left of the page, a blue one fixed at the bottom left of the page and a red column between them readjusting its height according to the height of the window.
How can I achieve this?
Setting its height at 100% simply makes the middle div expand its height to the bottom of the window which is not what I want. I need it to stop where the blue div starts. Also, making its height e.g. 73% doesn't make it auto-adjust itself correctly when the window height is changed either.
Assuming you are doing this because you want a footer that is flushed to the bottom of the page, then this will achieve a similar effect: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
However solution does not resize the middle div but merely positions the footer over it and then use padding to prevent the contents of the middle div from going onto the footer.
If you want to actually change the size of the middle div, here's the JavaScript for it using jQuery: http://jsfiddle.net/BnJxE/
JavaScript
var minHeight = 30; // Define a minimum height for the middle div
var resizeMiddle = function() {
var h = $('body').height() - $('#header').height() - $('#footer').height();
h = h > minHeight ? h : minHeight;
$('#body').height(h);
}
$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height: 100%;
}
#header {
background:#ff0;
height: 100px;
}
#body {
background: #aaa;
}
#footer {
height: 60px;
background:#6cf;
}
The correct way of ending <div> tag is by using </div>.
Try this code-
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
<div style="float: left; height: 50px; width: 200px; background-color: green; position: fixed;"></div>
<div style="float: left; height: 100%; width: 200px; background-color: red;"></div>
<div style="float: left; bottom: 0px; left:0px; position: fixed; height: 50px; width: 200px; background-color: blue;"></div>
</div>
</body>
HTML:
<body>
<div id="wrapper">
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">
content<br/>
content<br/>
</div>
</div>
</body>
CSS:
html, body {
height:100%;
}
#wrapper {
position:relative;
height:100%;
}
#div3 {
background:pink;
bottom:0;
position:absolute;
width:100%;
}
jsfiddle: http://jsfiddle.net/BnJxE/
You can use paddings the same height of your top and bottom elements and set box-sizing to border-box. By setting the height to 100% it will cover the entire height minus the paddings.
JSFiddle with scrollable content
#container {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
height: 100%;
}
#top {
float: left;
height: 50px;
width: 200px;
background-color: green;
position: fixed;
top: 0;
}
#middle {
float: left;
height: 100%;
width: 200px;
background-color: red;
box-sizing: border-box;
padding-bottom: 50px;
padding-top: 50px;
}
#bottom {
float: left;
height: 50px;
width: 200px;
background-color: blue;
position: fixed;
bottom: 0;
}
<body>
<div id="container">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</body>