I am trying to force a child DIV to 100% height within a parent DIV.
The parent div contains an image at z-index:1
The child div is z-index: 9999
I can;t get the child DIV to force 100% height.
#protect_wrap { width: 100%;
float: left;
background: #FFFFFF;
margin-top:0px;
text-align: center;
height: 100%;}
#protect_wrap img { z-index:1;}
#protect_col1 { width:200px;
margin: 0 auto;
background: yellow;
z-index:999;
position:relative;
min-height: 100%;}
img.responsive-fill { width: 100%;
float: left;
height: auto;}
<div id="protect_wrap">
<img src="img/protect.jpg" class="responsive-fill">
<div id="protect_col1"></div>
</div>
You can change #protect_col1 position to absolute and set it parent #protect_wrap to relative, the child will follow the parent height & width.
min-height is different from height. You can only min-height: 100% if the parent has some value in min-height. Can you use height for the child div?
Can you have this have these changes?
#protect_wrap {
position:relative;
.......
}
#protect_col1 {
..........
position:absolute;
}
Related
When I try to set height: 100% on a child div, the height stays 0.
This is the parent div:
#game-content {
margin-top: 50px;
overflow: auto;
height: 100%;
width: 100%;
}
#game-wrapper {
float: left;
margin-left: 90px;
position: relative;
height: 100%;
}
<div id="game-content">
<div id="game-wrapper">
<div class="game">
<img class="game-element" src="http://placehold.it/200x200" />
<div class="game-element" id="description">
<h4 id="game-header">Game1</h4>
Desc
</div>
</div>
</div>
</div>
The height of game-content is also 100% (it's not 0). Although the height of game-wrapper stays 0, while the width does work. What am I doing wrong?
the #game-content or its parent(body) must have a fixed height, if try setting a fixed height in #game-content the #game-wrapper will have its 100% height.
Try out:
#game-content
{
margin-top:50px;
overflow:auto;
height:1000px;
width:100%;
}
#game-wrapper
{
float:left;
margin-left:90px;
position:relative;
height:100%;
}
or
body, html { /* both to be sized */
height: 1000px; /* or 100% */
}
A block element gets it height according to the content it has. Since you are giving a percentage height to the parent #game-content which does not have a well defined child content height (you are giving the child too in pixels), it is creating this problem. Giving a specific height to the parent solves the problem.
#game-content
{
margin-top:50px;
overflow:auto;
height:someheight px;
width:100%;
}
#game-wrapper
{
float:left;
margin-left:90px;
position:relative;
height:100%;
}
what i am looking at is a common issue with floating elements. a element that is floated does not affect its parents as one would expect. simply floating the parent element, in this case #game-content will do the trick.
#game-content
{
float:left; /* just need this one line */
margin-top:50px;
overflow:auto;
height:100%;
width:100%;
}
I have a .container div that is 600px max in width or else 100%.
Inside this div is a .content div that I want to be 60% of the 100% of the container's width.
More generally I'm trying to make a responsive rectangle div instead of a square.
http://jsfiddle.net/7zE9x/ (The image inside the content should be overflown, and have a y-scroll bar)
That is
My HTML is:
<div class="container">
<div class="content">
<img src="..." />
</div>
</div>
Where my css looks like:
.container {
background: black;
padding: 3%;
position: relative;
width: 100%;
max-width: 600px;
}
.content {
overflow: auto;
height: 60%; /* Set this to 400px, meaning that it won't be responsive */
}
.content img {
display:block;
width: 100%;
}
if I set the height of the .content div to 400px it does what I want but it is not a percentage (so on resize it doesn't change - i.e. when the width of the container is 200px the content div's height should be 120px).
You need to set height for .container too.
If the child does not know height of parent how will it adjust it self based on percentage???
Take a look at Fiddle
body {
padding: 80px;
}
.container {
background: black;
padding: 3%;
position: relative;
width: 100%;
max-width: 600px;
height:500px;/* Set height as per your wish. */
}
.content {
overflow: auto;
height:50%; /* Adjust height accordingly. */
}
.content img {
display:block;
width: 100%;
}
I want to split up the view in four parts. A header at the top, using full page width and fixed height.
The remaining page is split up in two blocks of the same height, the upper of them contains two same-sized blocks next to each other.
What I tried is (without the header):
#wrap {
width: 100%;
height: 100%;
}
#block12 {
width: 100%;
max-height: 49%;
}
#block1,
#block2 {
width: 50%;
height: 100%;
float: left;
overflow-y: scroll;
}
#block3 {
width: 100%;
height: 49%;
overflow: auto;
/*background: blue;*/
}
.clear {
clear: both;
}
<div id="wrap">
<div id="block12">
<div id="block1"></div>
<div id="block2"></div>
<div class="clear"></div>
</div>
<div id="block3"></div>
</div>
Apparently, using a percentage value for the height won't work that way. Why is that so?
add this to you CSS:
html, body
{
height: 100%;
}
working Fiddle
when you say to wrap to be 100%, 100% of what? of its parent (body), so his parent has to have some height.
and the same goes for body, his parent his html. html parent his the viewport..
so, by setting them both to 100%, wrap can also have a percentage height.
also:
the elements have some default padding/margin, that causes them to span a little more then the height you applied to them. (causing a scroll bar)
you can use
*
{
padding: 0;
margin: 0;
}
to disable that.
Look at That Fiddle
When you set a percentage height on an element who's parent elements don't have heights set, the parent elements have a default
height: auto;
You are asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing with the height of child elements.
Besides using a JavaScript solution you could use this deadly easy table method:
#parent3 {
display: table;
width: 100%;
}
#parent3 .between {
display: table-row;
}
#parent3 .child {
display: table-cell;
}
Preview on http://jsbin.com/IkEqAfi/1
Example 1: Not working
Example 2: Fix height
Example 3: Table method
But: Bare in mind, that the table method only works properly in all modern Browsers and the Internet Explorer 8 and higher. As Fallback you could use JavaScript.
add this to your css:
html, body{height: 100%}
and change the max-height of #block12 to height
Explanation:
Basically #wrap was 100% height (relative measure) but when you use relative measures it looks for its parent element's measure, and it's normally undefined because it's also relative. The only element(s) being able to use a relative heights are body and or html themselves depending on the browser, the rest of the elements need a parent element with absolute height.
But be careful, it's tricky playing around with relative heights, you have to calculate properly your header's height so you can substract it from the other element's percentages.
Percentage in width works but percentage in height will not work unless you specify a specific height for any parent in the dependent loop...
See this :
percentage in height doesn’t work?
The div take the height of its parent, but since it has no content (expecpt for your divs) it will only be as height as its content.
You need to set the height of the body and html:
HTML:
<div class="block12">
<div class="block1">1</div>
<div class="block2">2</div>
</div>
<div class="block3">3</div>
CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block12 {
width: 100%;
height: 50%;
background: yellow;
overflow: auto;
}
.block1, .block2 {
width: 50%;
height: 100%;
display: inline-block;
margin-right: -4px;
background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
width: 100%;
height: 50%;
background: lightblue;
}
And a JSFiddle
Basically, the problem lies in block12. for the block1/2 to take up the total height of the block12, it must have a defined height. This stack overflow post explains that in really good detail.
So setting a defined height for block12 will allow you to set a proper height. I have created an example on JSfiddle that will show you the the blocks can be floated next to one another if the block12 div is set to a standard height through out the page.
Here is an example including a header and block3 div with some content in for examples.
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
}
#block12{
position:absolute;
top:20%;
width:100%;
left:0;
height:40%;
}
#block1,#block2{
float:left;
overflow-y: scroll;
text-align:center;
color:red;
width:50%;
height:100%;
}
#clear{clear:both;}
#block3{
position:absolute;
bottom:0;
color:blue;
height:40%;
}
I have a body background and I have a div in that body.On window resize, I want to have the application as such. To maintain the width,if I give fixed width to the body,on window resize I am not getting the scroll bar and as a result full page is not displayed. If I dont give fixed width, the page alignment changes and it the elements inside the body gets collapsed on window resize. Here is my code.Thanks in advance.
body.background
{
background: url(../images/common/header/Background_color.png);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:top center;
height: 100%;
width: 100%;
border: 0;
background-size:contain;
position:fixed;
overflow:auto;
}
div.emptybody
{
height:100%;
width:97%;
background-color: rgb(255, 255, 255);
margin: 0px 25px 25px 25px;
height:470px;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}
<body class="background">
<div class="emptybody">
-------------other elements and contents---------------
</div>
</body>
To maintain the width,if I give fixed width to the body.
You're not using a fixed width in your code, using '%' is dynamic.
On re-sizing your window it will always calculate in '%' from every border of the screen.
You need the page to 'overflow', to exceed the borders of the screen.
There are two ways of doing that:
Give your div a fixed width in pixels
div.emptybody { height: auto; width: 900px;}
Give the 'children' divs within their parent (div.emptybody) a fixed width.
div.emptybody { height: 100%; width: 97%;}
div.emptybodyChild {height: auto; width: 900px; }
try this
body {
height: 100%;
bottom: 0px;
width: 100%;
background-color: black;
}
div {
position:absolute;
height: 10px;
width: 200px;
margin:10px;
background-color: red;
}
also you can specify div posicion by providing margin-top/left/, or just using top/left/ values
You were on the right track, but you applied the overflow wrong. The overflow needs to be for the div with your content, and it needs to be set to scroll, find it here:http://jsfiddle.net/msbodetti/EWwJA/
You also gave two heights for the div. It applied the 100% height before the other height of 470px.
You can also add divs or spans within the main div to get fixed widths and heights if you need it for your content.
HTML:
<body class="background">
<div class="emptybody">
<span class="fixedText">-------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents---------------</span>
</div>
</body>
CSS:
body.background
{
background: #000;
background-repeat:repeat-x;
background-attachment:fixed;
background-position:top center;
height: 100%;
width: 100%;
border: 0;
background-size:contain;
position:fixed;
}
div.emptybody
{
width:250px;
background-color: rgb(255, 255, 255);
margin: 0px 25px 25px 25px;
height:200px;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
overflow:scroll;
}
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}