We Keep Coding

display div above all without scroll

I'm working on a gallery and managed to make it open and close by clicking two separate buttons. However, when opened I want it to be positioned above all content, the full width and height of the page and to not be able to scroll the original html (for example like when you open a picture on facebook). Currently when I try to position it absolute or fixed, it just jumps to the top of the page and I can still scroll through the rest of the html.
The html of the gallery that opens
<div class="container" id="container-one">
<div class="gallery">
<img src="1.jpg" style="max-width:100%">
</div>
<div class="gallery">
<img src="2.jpeg" style="max-width:100%">
</div>
<a class="close" onclick="Closed()">✖</a>
</div>
And the css
.container {
display: none;
position: absolute;
}
.gallery {
display: none;
height: fit-content;
width: 99vw;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.6);
background-size: 100%;
z-index: 1300;
text-align: center;
}
To open and close it I used style.display change from none to block.
I looked online but could only find codes for entire galleries with hundred lines and I couldn't figure out which part did that.

The key may be the overflow value in CSS. When overflow is hidden on body, scroll is disable. See this questions about disabling scroll.
This CSS will place your element above all, and on the whole page
.container {
position: absolute;
top: 0px;
left: 0px;
z-index: 10; /*This must be the highest z-index value of your page to be above all*/
width: 100%;
height: 100%;
}
And to disable/enable scroll dynamically, you can use:
function disableScroll() {
let body = document.querySelector("body")
body.style.height = "100%" // Make sure the height is fixed
body.style.overflow = "hidden" // Hide the overflow = disable scrolling
}
function enableScroll() {
let body = document.querySelector("body")
body.style.overflow = ""
}

Have div maintain screen width and height

I am looking to create a website in which it has a main div in which both the width and the height is always the size of the screen. No matter what is contained within this div it must contain this width and height.
If you look at this example of what I want.
My aim is for the navigation section to be contained in the large blue part on the left and for the main page content to be displayed within the white box and for this white div to only scroll sideways. I have searched for days on trying to get this to work but something always goes wrong. Examples of things I have tried are:
How to make the main content div fill height of screen with css
how to make a full screen div, and prevent size to be changed by content?
How to make a div to fill a remaining horizontal space?
If somebody can help with this or at least point me in the right direction for guidance it would be awesome. Thanks in advance.

1. Using CSS3 flexbox
/*QuickReset*/ *{margin:0; box-sizing:border-box;} html,body{height:100%;}
/*
OP: -I am looking to create a website in which it has a
main div in which both the width and the height is
always the size of the screen
A: -let this be body!
*/
body{
background: #0ae;
display: flex;
flex-flow: row nowrap;
padding: 40px;
}
/*
OP: -My aim is for the navigation section to be
contained in the large blue part on the left
A: -Thanks to CSS3 flexbox on body all you need is a desired menu width:
*/
aside{
width: 140px; /* or any size you want, px, %, ... */
}
/*
OP: -and for the main page content to be displayed within
the white box and for this white div to only scroll sideways
A: -add overflow:auto; to make it scroll and flex:1 to grow to available size
*/
article{
background: #fff;
overflow: auto; /* make element scrollable */
flex: 1; /* let the browser grow this element */
}
/* just to demonstrate sideways scroll */
article{
display: flex;
flex-flow: row nowrap;
}
section{
min-width:100%;
}
<aside>
Menu
</aside>
<article>
<section>"and I want this CONTENT area to scroll sideways"</section>
<section style="background: #eee;">YEY</section>
</article>
2. The old-school way (compatible down to IE8)
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;}
body{ /* your app */
padding:40px;
background: #0ae;
}
#aside{ /* your menu */
float:left;
width: 100px;
}
#content{ /* white content area */
overflow: auto;
margin-left: 100px; /* menu is 100px remember? */
height:100%;
background: #fff;
}
/* Just to test horizontal scrollability */
#content{
white-space:nowrap;
}
.page{
white-space: normal;
display: inline-block;
vertical-align: top;
width: 100%;
height:100%;
margin-right: -4px;
/* Todo: make scroll vertically each page if needed */
}
<div id="aside">
Menu
</div>
<div id="content">
<div class="page">Content A</div>
<div class="page" style="background:#eee;">Content B</div>
</div>

after setting the main div css overflow properties the way you like them,
you can always javascript it (as in the given example)- and it will be fully backward compatible.
<div id=[mainDivID]>
<script>
[maindDivID].style.width = screen.width +"px";
[maindDivID].style.height = screen.height +"px";
</script>
<!-- main div content -->
</div>

How do I change the position of this sliding text-area?

I'm trying to add a disclaimer section to the website I'm working on. I want a tab-like button at the bottom of every page which would open up a text area.
I searched codepen.io a bit and found a very simple way to do it. After removing non-relevant syntax, I tried to move the tab from the top of the page to the bottom.
Here's where I came across a problem. When the tab was at the top of the page, the text area would push down the tab when clicking on it.
Now that it's at the bottom, the textarea shows up above the tab, as the tab itselfs stays at the bottom of the page.
How do I make sure the text area pops up beneath the tab, pushing the tab up?
$(document).on('click', '#menu-tab', function() {
$('#menu-nav').slideToggle('slow');
});
body {
background-color: #333333;
text-align: center;
}
#menu-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#menu-tab {
background-color: #FC4349;
cursor: pointer;
margin: 0% 45% 0% 45%;
padding: 5px 10px;
}
#menu-nav {
display: none;
background-color: #FC4349;
margin: 0% 30% 0% 30%;
}
<body>
<div id="menu-wrapper">
<div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
<br>disclaimertextdisclaimertextdisclaimertext</div>
<div id="menu-tab" class="closed">Disclaimer</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
In case my description didn't give a clear image of the situation:
Tab at the top the of screen
Tab at the bottom of the screen

Move the html containing the disclaimer to below the tab
(Demo)
<div id="menu-wrapper">
<div id="menu-tab" class="closed">Disclaimer</div>
<div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
<br>disclaimertextdisclaimertextdisclaimertext</div>
</div>

How to continue the background of a div on another div/span?

In my webpage I have have a block with an background and below I have a button that should continue the background.
Here is an example. The left image is what my webpage is now, and the right image is what the webpage should be. You can see that the background continues on the button.
My code structure is something like:
<div id="section-1">
<div class="shown-content">
<div class="background"></div>
<div class="content">
... here are shown contents ...
</div>
</div>
<div class="hidden-content">
... here are hidden contents ...
</div>
<div class="button-content">
<span class="button">FOLD OUT</span>
</div>
</div>
The functionality is that when you click on the button, it triggers the JQuery slideToggle and it shows/hides the hidden-content div.
My idea is to set the button background the same width and height than the content background and then position it where appropriate. But I'm a bit lost because I don't find any way of doing this, and maybe you know a better way.

Let's say your placeholder for the image is 100px in height and the button is 30px.
Let's say your button always are in the center of the main image div.
Then you need an image that is 130px high, where the background position is set to center top and the buttons background position is set to center bottom.
Sample
.imgdiv {
background-position: center top
}
.buttdiv {
background-position: center bottom
}
If your button isn't in the center you need to adjust the "center" part of background position to make it match the main image

Your initial idea is probably the best solution.
Use background position to correctly position you div.
.button-content{
background: url('') no-repeat 200 100%;
}
Numbers afer no-repeat are X position Y position of background image.

I've found this solution, hope it will help you.
Place the fold out button absolute in the relative positioned #section-1.
While placing it absolute, it will only take the width it needs. Then we use the pseudo-classes :before and :after to fill the space on the left and the right with the background color of the body (in my example white).
The HTML looks like this (expandable with your rest code):
<div id="section-1">
<div class="hidden-content">
hidden content
</div>
<div class="button">
Fold out
</div>
</div>
And the CSS:
#section-1 {
min-height: 100px; /*use min-height so it will expand */
background: url('pic.jpg');
position: relative;
padding-bottom: 30px; /* height of .button */
overflow: hidden; /* to hide the :before and :after */
}
.button {
position: absolute;
bottom: 0;
right: 20px;
height: 30px;
width: 75px;
text-align: center;
}
.button:before, .button:after {
content: ' ';
background: white;
position: absolute;
width: 1000px;
left: -1000px;
height: 30px;
}
.button:after {
left: 100%;
}
.hidden-content {
display: none;
}
And a demo.

Force a div to go to bottom

I browsed the same question in SO, and none of them worked well [Cross Browser compatible] .
So, i'm looking for the same job to solve with jQuery.
I want to place the div at the bottom of the HTML page, not to the bottom of the screen.
I've tried with CSS only so far
clear: both;
min-height: 6%;
position: fixed;
bottom: 0;
Edit
My CSS
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#footer {
width: 100%;
height: 6%;
position: absolute;
bottom:0px;
left:0px;
}
#content {
float: left;
width: 59.5%;
height: 83%;
position:relative;
}
#news {
z-index:2;
}
<html>
<div id="content">
<div id="news"> </div>
</div>
<div id="footer"></div>
<html>

I believe you want sticky footer after all.
jsfiddle demo
It uses this sticky footer.
Basic idea is to use that sticky footer or basically any Sticky footer and then color your #wrap, because it will cover the whole viewport vertically

Set height of body and html to 100%, then create a wrapper for the entire body that has position: relative and height:100%, when you have the element inside this wrapper it will align to the bottom.
<html
<body>
<div id="body-wrapper">
<div id="bottom"></div>
</div>
</body>
</html>
With CSS:
body, html {
height:100%;
}
#body-wrapper {
height:100%;
position:relative;
}
#bottom {
position:absolute;
bottom:0px;
left:0px;
}
Here is what happens without a wrapper: http://jsfiddle.net/Cj4c2/1/
And here it is with a wrapper: http://jsfiddle.net/CPSt6/

You should use position: absolute; bottom: 0px; That way div should be always on bottom of wrapping element. Wrapping element should have position: relative;

Please refer to the css document:
An element with fixed position is positioned relative to the browser window.
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is
src: http://www.w3schools.com/css/css_positioning.asp
so you should use position:absolute.