We Keep Coding

how do I set my Iframe in screen for mobile devices

My css for Iframe:
position: absolute;
right: 0;
top: -100px;
z-index: 1;
height: 110%;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
This is my CSS for Iframe screen on my website, but in mobile devices, I have to scroll the Iframe screen to see the full website.
Note: making the iframe responsive is not in my hand.

The bootstrap method. Use an iframe or video element in it.
<div class="embed-16by9">
<iframe src="..."></iframe>
</div>
with responsive css
embed-16by9 {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-16by9::before {
display: block;
content: "";
padding-top: 56.25%; /* ratio 16:9 */
}
.embed-16by9 iframe,
.embed-16by9 video {
width: 100%;
border: 0;
position: absolute;
top: 0; bottom: 0; left: 0;
height: 100%;
}

Adding a margin to a page, including absolutely/fixed positioned elements too

Is there a way to set a global margin to a page which will include absolutely and fixed positioned elements as well?

This is possible is you wrap these absolute / fixed elements with an element which has transforms set on them.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
body {
margin: 100px;
color: white;
transform: translateX(0);
border-top: 2px solid green;
}
.absolute, .fixed {
width: 100px;
height: 100px;
top: 0;
}
.absolute {
position: absolute;
background-color: red;
left: 0;
}
.fixed {
position: fixed;
background-color: blue;
right: 0;
}
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
Notice that, in the above snippet, both the absolute and the fixed element are positioned relative to the body with the margin.
Note:
1) I don't necessarily recommend using it this way as it will most probably cause confusion in the long run.
2) As #Temani Afif pointed out fixed elements will behave like absolute elements this way - so this technique may not work as expected depending on the context.

You can add margin to all elements with the wildcard selector, but then you'll spend a lot of time cancelling this out on internal elements. You can try something like body > * to add margin to top level elements.
body > * {
margin: 50px;
}
#abs {
position: absolute;
top: 0;
left: 0;
background: red;
width: 100px;
height: 100px;
}
#abs .inner {
position: absolute;
top: 0;
left: 0;
background: blue;
width: 50px;
height: 50px;
}
#fixed {
position: fixed;
bottom: 0;
right: 0;
background: green;
width: 100px;
height: 100px;
}
<div id="fixed"></div>
<div id="abs">
<div class="inner"></div>
<div>

Fixed header/footer keep vertical scroll bar on top?

I have a partly transparent fixed footer and header with scrolling content: https://jsfiddle.net/ru8jgxg9/
What changes to that JSFiddle would need to be made to keep the vertical scroll bar on top when there is overflow content (but keep the scroll bar the whole height of the window too)?
I notice stackoverflow.com seems to be able to do it:
html {
height: 100%;
}
body {
height: 100%;
}
/* Fixed Header */
.dvTableTop {
display: table;
width: 100%;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: #000000;
top: 0px;
height: 50px;
position: fixed;
left: 0;
right: 0;
opacity: 0.7;
background-color: Red;
z-index: 1030;
}
/* Scrollable Content */
.dvContentContainer1 {
position: fixed;
top: 0;
bottom: 0;
padding-top: 30px;
overflow: auto;
left: 0;
right: 0;
}
/* Fixed Footer */
.dvFooterContainer1 {
position: fixed;
height: 50px;
background-color: Yellow;
bottom: 0;
left: 0;
right: 0;
opacity: 0.7;
}

Your fixed header and footer needs to be inside the scrolling container. Currently, they're outside the content container and will overlap it and its scrollbar.
Also, your content container can't have a position: fixed, otherwise it will fight with other fixed elements for position and cause overlaps. Fixed elements are always relative to the document, not the container.
Below is a working example.
body {
margin: 0;
padding: 0;
font-family: arial, helvetica, san-serif;
}
.content {
height: 1000px;
background: linear-gradient(45deg, blue, red);
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(0, 255, 0, 0.5);
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(0, 255, 0, 0.5);
}
<div class="content">
<div class="header">Header</div>
<div class="footer">Header</div>
</div>

I am confused why you are doing it that way. All you have to do is remove your position: fixed from your .dvContentContainer1 like so
.dvContentContainer1 {
padding-top: 30px;
}
And as long as the content extends past the bottom of the page it will work the way you are wanting it to.
See this updated fiddle
Edit: If you remove the height: 100%; from the body tag the scroll bar will go away if the content does not extend past the height of the screen.
See this updated fiddle 2

Modal fixed position content shift

After a lot of research, I am unable to find a proper solution for the shifting to the right of fixed positioned elements, cover images, and standard content, when a modal window is open.
Note: I am looking for a general, clean solution, not an hardcoded fix that would work just on a specific layout.
Does anyone know how to fix this issue? Please refer to this example: http://codepen.io/microcipcip/pen/kXdRWK
body {
height: 2500px;
&.-modal-open {
overflow: hidden;
}
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
background: #FF0000;
}
.modal {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity .2s ease-in-out;
body.-modal-open & {
opacity: 1;
}
}

The solution is very simple and a pure css fix:
.-modal-open .fixed,
.-modal-open .content {
overflow-y:scroll;
}
..however, this requires that your content is styled differently. You should never use a margin for your content, but rather wrap it in a container and use padding instead.
The scrollbar's width isn't always 17px... 17px is for Firefox, but 15px for chrome, sometimes IE doesn't even have a scrollbar width depending on the code.
Here is the updated pen:
http://codepen.io/scooterlord/pen/KgKLwB
edit: forgot to say, that this is a cross-browser solution and works flawlessly everywhere I tested it. If the browser is mobile, then no change of width happens anyway from the addition/removal of the extra scrollbars and depending on the browser the newly created scrollbars for the content/fixed elements is always the same as the initial body scrollbar.

The main trick is to not use body as your content wrapper. Use a dedicated div as wrapper and place your modals outside so the scrollbars don't interfere with each other.
var $btnShow = document.querySelector('.show');
var $btnHide = document.querySelector('.hide');
var $body = document.querySelector('.modal');
$btnShow.addEventListener('click', function() {
$body.classList.toggle('-modal-open')
});
$btnHide.addEventListener('click', function() {
$body.classList.toggle('-modal-open')
});
.wrapper {
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
overflow: auto;
}
.content {
background: url('https://www.dropbox.com/s/m16kxhb2jg5jwwh/bear-800x450.jpg?dl=0&raw=1');
background-size: cover;
background-position: center center;
height: 2500px;
width: 100%;
}
.clickme {
position: fixed;
top: 50%;
left: 50%;
padding: 10px;
border: none;
background: #000000;
color: #ffffff;
text-transform: uppercase;
transform: translate(-50%, -50%);
}
.clickme:hover {
background: grey;
cursor:pointer
}
.modal {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: none;
transition: opacity .2s ease-in-out;
z-index: 3;
}
.modal.-modal-open {
display:block;
}
.modal-content {
min-height: 1500px;
margin: 100px;
background: url('https://www.dropbox.com/s/u520y7yo711uaxi/poster2.jpg?dl=0&raw=1');
background-size: cover;
}
<div class="modal">
<div class="modal-content">Content
<button class="clickme hide">Toggle Modal HIDE!</button>
</div>
</div>
<div class="wrapper">
<div class="content">
<button class="clickme show">Toggle Modal SHOW!</button>
</div>
</div>

How about adding 17px right-margin to the body each time a modal is opened. That would emulate the space that was reserved for the scroll bar. (17px is the width of standard browser width)
body.-modal-open {
margin-right: 17px;
}
meanwhile, for for fixed element you recalculate the width;
.-modal-open .fixed {
width: calc(100% - 17px);
}
There is still one problem though, the CSS background image is still shifted, the solution is simply placing it in a div container instead of the body.

fixed div and see the lower height data

I have one button, when I click in this button one div generates in the body which has this css:
div#transparentDiv {
width: 100%;
background-color: rgb(0, 0, 0);
opacity: 0.7;
height: 100%;
position: fixed;
top: 0 !important;
left: 0;
z-index: 95;
}
and one div that has none css display, remove none display and get this css
.popUp {
color: #fff;
margin: 0 auto;
position: fixed;
top: 37px;
z-index: 98;
width: 61%;
background-color: #d8d8d8;
left: 0;
right: 0;
}
now my problem is this section, my div that fixed and i can't see full content,
and when I scroll page this div fixed and don't scroll down to see the lower height
What should I do?

Without any HTML this is realy hard to answer. Try to add
overflow: scroll;
or
overflow: auto;
To your fixed div. Then you can scroll the content of your div seperatly.

If you could scroll down to see the contents of a fixed div, then it would not be fixed would it?
try this:
.popUp {
position: absolute;
}