I have a parent with position:fixed; width/height:100%; overflow:auto and a child that also has position:fixed. When the parent's content overflows and the parent starts scrolling I would expect the child to stay fixed in relation to the viewport. It does not.
the scenario is a slide down panel on top of the content using css transforms. The slide-down panel has a close button that should stay in view while the panel's content scrolls. Change the .overlay-slidedown class on the .overlay element to .overlay-fade and, in that case, the close button will stay in it's place.
https://jsfiddle.net/xajk7uez/3/
If you add an extra layer within.overlay as a sibling to .overlay-close to only address the overflow-y: scroll; the position: fixed; on .overlay-close will work. This .overlay-content layer should also be 100% width/height
.overlay > .overlay-content {
width: 100%;
height: 100%;
overflow: auto;
}
See updated Fidle for the demo.
https://jsfiddle.net/n0wxfc60/2/
The Solution for your issue will be
placed the .overlay-close outside the .overlay
see my edits here https://jsfiddle.net/xajk7uez/5/
I believe this question addresses your issue.
Related
We have one small chat in site where some background image is there in chat
it looks cool but when customer clicks on order status it asks for order no but when this content is added background image disappears
we tried several thread in stackoverflow but nothing is working
we tried adding these things
background-size: cover;
/* background-size: 100% 100%; */
background-repeat: repeat;
when we increase the height to 1000% it works and shows image but then our scrollTop goes to wrong place
here is our code and
class of interest
pushdaddy-body pushy-whatsapp-body
.pushy-whatsapp-body:before {
display: block;
position: absolute;
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 0;
opacity: .08;
background-image: url(https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870);
here is live site where you can test
https://itsneotpras.myshopify.com/
click on chat and just click on order status
Don't use an absolute :before with height 100%, because 100% is relative to the parent height.
Instead here's three solutions:
1. New common parent element
Create another simple DIV wrapper with min-height: 100% that will be the new parent of your messages. That way, the min-height will be relative to the parent, but as soon you'll have more messages - it will grow as the content grows. Also don't make it position absolute.
PS: The background will move with the scroll!
2. Make it sticky
Add to your :before pseudo:
content: "";
position: sticky; /* instead of absolute */
PS: The background will not move with the scroll!
3. Parent background
Another way, if you want your background to be "fixed", change the background opacity in an image editor, and assign it to the .pushy-whatsapp-body element.
PS: The background will not move with the scroll!
As your box scrolls, your ::before element moves with it. I would take it off the ::before element and add it to the actual element's background, or modify how your ::before stays in place.
Can you just take it off the pseudo element? Put your background-image on the div class.
<div class="pushdaddy-body pushy-whatsapp-body"></div>
background-image: url("https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870");
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
I am facing problem with nested divs. Text on parent div would get hidden from div in front.
Nested div "numReview" is set to be bottom left of parent div Bodyboxleft.
Reason I want numReview to be on bottom left is because some pages would have less content some pages would have more content. When on page with more content, div:numReview would hide bottom 80px of content in bodyboxleft div.
fiddle link page is below:
http://jsfiddle.net/CANu4/1/
You have a position: absolute; with float:left;..............
remove position:absolute; so that #numReview won't go over the text
#numReview {
width: 820px;
height: 80px;
float:left;
background-color: #C0BFBF;
}
And if you are using position absolute, use the top property to place it in required position, though as there is no need of absolute on the page, you could do without it.
A more convoluted example of this question is here: child div height of 100% being ignored (a working solution is yet to be found)
Validating test case for my question: http://www.elucidatedbinary.com/tmp/layouttest_100percentheight.html. I want the #main div (yellow background) to expand to 100% of the height of it's parent div (#container).
My question is simple, can this be done without
Reverting to jQuery (yucky!) or
Reverting to tables (yuckier!)
I am yet to find a single example of how this can be done using the CSS layout model.
Thankyou.
EDIT: When I say "expand to 100% of the height of it's parent div" I mean expand all the way to beneath the footer. The header is supposed to leave a pink gap at the top.
try:
#main { position: absolute; top: 0px; bottom: 0px; }
I am having a problem with some div's
The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absolute positioned, they do not affect the outer divs height. Is there a way to make these inner divs affect the height of the outer div?
The reason I am styling these divs with position:absolute is so that they all start at the top of the container div.
As far as I know, there's no way for absolutely positioned child elements to affect the height of their statically, or relatively positioned parent elements using only CSS. Either:
Reorganize so that the child elements remain in the document flow
Use JavaScript on load of the page to set the height of the parent to the height of the largest child
This issue is common in fade-in/fade-out JavaScript slideshows, and from what I've seen either 1) the height of the parent container needs to be defined or 2) the parent container's height is set dynamically for each slide.
I recently had this problem with a fade in/out CSS transition slideshow, and ended up solving it by giving the first child element position: relative; and the others position: absolute; top:0; left: 0; which ensures that the containers height is the same as the height of first element. Since my CSS transition slideshow uses the opacity property the container dimensions never changes during the course of the slideshow.
Alas, since I also needed to supply a javascript fallback for older browsers I had to set the container height for these browsers anyway (because of jQuerys fadeIn/fadeOut actually setting display: none; I would guess).
Here is a long overdue cross-browser solution to your problem. No more static width, no more em hack.
<style>
/* clearfix */
.container:after {
content: '';
display: table;
clear: left;
}
.page {
float: left; /* display side-by-side */
width: 100%; /* be as wide as parent */
margin-right: -100%; /* take up no width */
}
</style>
<div class="container">
<div class="page"></div>
<div class="page"></div>
</div>
After searching for a solution to this problem for so long, I am baffled to see how simple it is. Granted, the .page elements are not absolutely positioned. However, all the same goals can be achieved through this method, with almost no pain or sacrifice.
Here's a demo: https://jsfiddle.net/eqe2muhv/
This also works for inline-blocks, of course. Though you might need to set the font-size or letter-spacing of the container to 0. I would also recommend using vertical-align: top on the .page, to simulate a regular block element.
Here's a demo: https://jsfiddle.net/dzouxurs/8/
Try to use display: inline-table, height: auto; .. it works for me
I think you should position them relatively and just change "vertical-align" to "top" in the interior divs. Then you won't have the issue of messing with abs divs.
You can simply float the divs if you want them to be on the same horizontal plane.
i've done this task without any JS. Only, by CSS:
.frame {
max-height: calc(100vh - 283px); // 283px gives me some space at the botoom of the frame
}
Maybe u can try max-height: calc(100% - 50%); it will work if the content that should be in the middle of the screen/div is super short/small.
position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...
Test display: inline-block on the element that need auto height.