We Keep Coding

Image 100% of parent. Parent is position fixed

Could somebody please assist. I am trying get an image to have a max-height and an auto width. The problem is these rules are being ignored as it's parent is fixed
DEMO http://jsfiddle.net/gop4jhm9/5/
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
max-height: 100%;
background: red;
display: inline-block;
padding: 10px;
max-height: 30%;
}
#myDiv img {
width: auto;
height: 100%; // being ignored
}
Is there any way of doing this via CSS, JS, jquery ?

The problem is that you have the #myDiv with two max-height attributes. Take away the second one, which restricts the div to 30%, and it will work in fixed.

That is because it intends to keep the image's aspect ratio because you set the margin to auto. if you wish for a max height to be set, set it in the max-height property of the #myDiv.img.
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
background: red;
display: inline-block;
padding: 10px;
}
#myDiv.img
{
width: auto;
max-height:90%;
}

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;
}

Center absolute div indside/outside relative div

Is it possible with either CSS or jQuery to center an absolute div inside or outside a relative div, if you dont know the width of the relative div witch in this case is the parent element of the two.
normally i would do something like:
.child {
position: absolute;
top: 100%;
left: -50px;
width: 200px;
height: 300px;
}
but only if i knew that the parent is 100px wide, but what if i dont know?
FIDDLE

If you don't need to target IE8 and lower, you can use the CSS3 calc() function:
left: calc(50% - 100px);
Replace 100px with half of whatever width your absolute positioned child element is.
JSFiddle example: http://jsfiddle.net/Gmmqh/5/
Note the use of box-sizing: border-box to make the boxes even with each other, like on the third one.

To center anything use below code
margin:0px auto;
So your .child becomes
.child {
display: none;
position: absolute;
top: 100%;
margin:0px auto;
/*left: -50%;*/
width: 200px;
height: 300px;
background: #eee;
border: solid 3px #ddd;
}

Absolute positioned element not extending with scrollable content (past 100%)

I have a popup window in which an element called fade is supposed to extend to the full width of the screen (it does this when there is no scrollable content). However when content exceeds 100% of the browser window it does not extend to 100% of the page height.
If i set html, body { height: 100%; overflow-y: hidden; } I get the result I want but then I get 2 scrollbars on the right hand side.
http://jsfiddle.net/Dpqg5/
HTML
<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>
CSS
#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }
Any ideas on how to get this element to extend fully to the height of the web browser even when there is more scrollable content?

set your fade css to:
#fade {
display: none;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

How to make DIV element opaque

I have a div at the top of my site which is 100% wide and in a absolute and fixed position. The code for it is like:
div.header{
height: 60px;
width: 100%;
position: absolute;
position: fixed;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
Now everything in that works, but when users scroll down the site content appears behind this. Is there a way that I can prevent this from happening?

remove position: fixed;
it should be like
div.header{
height: 60px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
If you want to make it fixed than remove position:absolute. both will not work together.
you have position:absolute and fixed both together, but fixed will override the position because it is after absolute.
Now if you want to appear any element above of other and it has a position: absolute or fixed you can use z-index, heigher z-index element will cover up the lower z-index element.

A div element that needs to be displayed on front should have a higher z-index value than the element that needs to be behind.
eg.
div.header{
....
....
z-index:9999;
}
div.normal{
....
....
z-index:9998;
}
On my website I have a div footer that always appears at the bottom. I use the following code - It may come in handy in the future or for someone searching for a similar query.
#bottom
{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
z-index: 999;
background-color: rgb(30,122,212);
border-top:3px solid black;
border-bottom:1px solid black;
-moz-box-sadow: 0 0 10px white;
box-shadow: 0 0 10px white;
}
I hope this helps.

It is a silly question. Just remove the position: fixed; property from your class.