We Keep Coding

how can I use a code from a snippet which have a "position:fixed" element ? I can't make it stay inside my <div>'s height (parent)

I'm trying to use this snippet (link with original code) : https://codepen.io/starkxx/pen/NdemEv
here is the snippet edited with some content (a container for the POC, removed some code) :
https://codepen.io/Demky/pen/EzNLVB
I don't find a solution to contain the stem-wrapper inside his new parent's height; I think the problem is from this block of code but I can't find the solution
<div class="stem-wrapper">
<div class="stem"></div>
<div class="stem-background"></div>
</div>
the fixed stem-wrapper alway take the full windows height or disapear if I try to give him a position:absolute/relative/...
.stem-wrapper {
position: fixed;
top: 0px;
bottom: 0px;
left: 50%;
}
I'm not allowed to put a static value for 'top' as I don't know how far from the top the snippet will be
what I tried :
I tried to build a parent so I could use position:relative on the parent and add position:absolute on the child as I have seen here :
https://stackoverflow.com/a/20994123/9552861 but I failled to make it works
tried to play with position/container, in vain
I also tried to play with the javascript but I made no progress
Can you people give me tips on how to find the solution ?
Is it sure the problem is from the CSS ?
Should I keep trying to translate this fixed element to a parent(position:relative) / Child(position:absolute) relation; or am I not looking in the right direction ?
Please let me know if I need to add more informations on my question.
I let the css/html code on codepen for better visibility but I can paste it here if it's better for readers.
Screenshot of the problem:
Screenshot of the problem when I export the snippet to another website (the stem- take the whole page)
Edit :
Tried to make the problem easier to understand;
In the modified snippet (this link from top ) :
I added a container (#timelineContainer with background-color:yellow );
I expect the ".steam-wrapper" and his childs (.stem, .stem-background) to not go outside of the yellow area (updated the screenshot with the right color).
The goal is to contain this POC/Snippet to a container so it can works outside of this sandbox without taking the full page's height

If I understand what you want, what you need to do is this:
body {
background: #body-background;
margin: 0px;
padding: 0px;
font-family: sans-serif;
font-size: 15px;
line-height: 26px;
color: #B9CFD0;
font-family: 'Roboto Slab', serif;
/*overflow-x: hidden;
overflow-y: scroll;*/
overflow: hidden;
}
#timelineContainer {
overflow: auto;
height: 60%; /*any height you want the snippet to have*/
}
.container {
height: 40%;
}
Then you have to adjust a bit the stem:
.stem-wrapper {
position: fixed;
top: 40%;
bottom: 0px;
left: calc(50% - 8px);
max-height: 60%;
}
After that you'll have to adjust the JS to fit the new layout. Because the scrolling function was related to the body and now should be related to #timelineContainer

Microsoft-Edge adding a random overflow while other browsers not (SVG)

I'm a newbie here, nothing special, just have a little bug with Microsoft-Edge, it adds a random overflow-x while there's no content passing the screen's/browser's width, tried it on different screens and resolutions and the problem still there.
Here's a link of what I've done, if you want to test it on Microsoft-Edge : http://microsoft-edge.thefreecpanel.com/
A photo : Photo Showing overflow-x bug
Thanks in advance.

Try to set Margin to 0.
Make a test with code below and let us know whether it solves your issue or not.
html, body {
height: 100%;
}
body {
margin: 0; /* This will stop the margin, setting it to 0 */
}
div {
width: 100%;
height: 100%;
background: #ddd;
}
<div></div>

Slide up a "fixed height div" that splits a web page horizontally?

I need a box that slides up from the bottom of my page. I will use the box to show important information to new users. So for example, immediately after signup, the box will slide up with a welcome message.
I've made this jsfiddle that to some extend exemplifies the desired behaviour. It's just a div that gets slided up from the bottom:
$('.foot').addClass('slide-up', 500, 'easeOutBounce');
However, the code is only to exemplify, because the implementation is insufficient for the following reasons:
The bottom box has a pre-determined 500px height, because it's initially hidden 500px below the browser. Instead, I need just the box height to fit its content. The content will vary, and will even be changed through javascript once loaded.
The bottom box emerges on top of other elements. Instead, I want to split the screen in 2. A bottom half that has as much height as the box content needs. And a top half that behaves just like a regular web page, i.e. if there is too much content the user can just scroll down. To exemplify the described effect you can check this jsfiddle (the code has no relevance though)
How could achieve the described behaviour?

After experimenting with several methods, I ended up with a solution that combines some ideas given in freedomm-n's comments (modify the size of the main div) and in Nikhil's answer (use a flex container). You can see the result in this jsfiddle.
For the following markup:
<div id="divContainer">
<div id="divTop">
Main content
</div>
<div id="divFooter">
Footer content
</div>
</div>
And these styles:
html, body, form
{
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#divContainer
{
width: 100%;
height: 100%;
}
#divTop
{
overflow-y: auto;
padding: 8px;
height: calc(100vh - 16px); /* Accounts for padding and border (if any) */
}
#divFooter
{
padding: 12px;
text-align: center;
border: 1px solid black;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.containerEnd
{
display: flex;
flex-direction: column;
}
.topEnd
{
height: auto;
flex-grow: 1;
}
This Javascript code is used to animate the div elements:
function slideUpFooter() {
var currentHeight = $('#divTop').height();
var footerHeight = $('#divFooter').outerHeight(true);
$('#divTop').animate(
{ height: currentHeight - footerHeight },
2000,
'easeOutBounce',
function () {
$('#divContainer').addClass('containerEnd');
$('#divTop').addClass('topEnd');
});
};
The function called at the end of the animation sets the flexbox parameters, to ensure that the footer sticks to the bottom of the page.

I have updated your Fiddle. Look below for details.
You don't need to use position: fixed for the .foot section, you could use position: relative instead. Since I noticed you were using flex, I took the liberty to fix this using the same.
Changes made
Firstly I suggest adding a div container, giving a class name say - container.
Make the container display: flex & change the default direction to flex-direction: column.
Now since you want the main-content to be scroll-able depending on its contents, you need to first set a height to this section with height: 200px; and then make it scroll-able using overflow-y: auto;
Let me know if you have any doubts.

How to display an image fullscreen on page load

I have the script from previous stack overflow question on how to pick an image from an array at random.
Script to display an image selected at random from an array on page load
I want to take his idea a bit further, and display this image fullscreen on page load. I am working on a website, and had the idea to use an image as a greeting page. Where, when the page loads, you are greeted with a fullscreen HD image. When clicked, this image would disappear and show the full site. I wasn't exactly sure how to accomplish this though. Any ideas?
Edit: I'm not looking for direct implementation. Just general thoughts or jsFiddles on how to accomplish this task.

For showing the image on the page load you can use $( document ).ready() function. on click() of the image you could show the website.

Try using CSS like,
First option,
img {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Second option,
img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
To understand the above options read Perfect Full Page Background Image
I recommend you to use a complete full page background image slider for your problem. If it is available then use it without wasting your time.
I found a full page slider on http://www.freshdesignweb.com/fullscreen-jquery-slider.html in which the first one background slider is best suitable to you.
Also you can go to https://www.google.co.in/?q=full+background+image+slider to get more image sliders

Sliding bottom panel through HTML, CSS, JS by clicking on card/tile

I'm beginner and trying to display details of a card/tile from the sliding bottom of the page over click action. I already found one of the template with my requirements and trying to customize. I found few code samples on how can I do sliding effect from the bottom. I was able to findout solution but it works with hover action where as I am trying to do is as below.
Scenario:
As shown in the mockup screenshot >> Cards will be displayed in the home screen >> users clicks on one of the Card >> background should be transparent 50% and movie details should get displayed in sliding button panel >> PLAY NOW should be active
Like the left menu loading in the given template below - playdo template
one of the similar example I found is this but as I mentioned this is hover feature - Sliding bottom panel through HTML, CSS and JS
An other from the top sliding - http://hoveralls.design-way.ro/
Template in the screenshot that i am using is - https://github.com/tomclaus/playdo

Hi and welcome to the front-end world.
What you need to do is to create two different css classes that contain the things you want to change (in this case the top and the transparency). One for when your card/tile is "minimized" and one for when is "maximized".
.minimized{
background-color: rgba(255,255,255, 0.5);
top: 90%;
}
.maximized{
background-color: rgba(255,255,255, 1);
top: 75%;
}
and then apply a click event to your card/title using jQuery or Javascript and swap those classes to give the proper behavior.
$("#card").click(function(){
if($(this).hasClass('minimized')){
$(this).removeClass('minimized');
$(this).addClass('maximized');
}
else{
$(this).removeClass('maximized');
$(this).addClass('minimized');
}
});
Make sure that the CSS for your card/tile includes this:
-webkit-transition: all ease 1s;
That line will give a smooth transition when you swap the minimized and maximized classes.
Please check this jsfiddle to see the code in action.
ps. Since I'm using the "-webkit-" prefix for the transition this example only will work with webkit browsers (safari and chrome)

Ok I finally understood what you want to do with the mockup.
Well the idea is the same, and I'm sure it can be implemented in many other ways but I hope this one helps you to understand what is going on.
Pretty much you need two states (classes) for the actions you want to achieve.
A Minimized and Maximized for the div that holds the movie details.
#details{
z-index: 4;
position: absolute;
-webkit-transition: all ease 1s;
background-color: #2980b9;
color: white;
padding: 30px;
width: 100%;
height: 300px;
}
.minimized{
top: 100%;
}
.maximized{
top: 40%;
}
And other two for the "gray courtain" that sits on top of the cards when the details are show.
#courtain{
position:absolute;
background-color: rgba(100,100,100, 0.5);
width: 100%;
height: 100%;
}
.active{
z-index: 2;
}
.deactive{
z-index: -1;
}
All these must be controlled or toggled using Javascript with a click event for the Card.
function hideAndShow(){
var details = $('#details');
var courtain = $('#courtain');
if(details.hasClass('minimized')){
courtain.removeClass('deactive');
courtain.addClass('active');
details.removeClass('minimized');
details.addClass('maximized');
}
else{
courtain.removeClass('active');
courtain.addClass('deactive');
details.removeClass('maximized');
details.addClass('minimized');
}
}
It is important to check the "z-index" values on the states to place them correctly above the other, the one with the highest z-index value is the one that remains on top.
I've updated the JSFiddle, check it out and hopefully all this makes sence.