I have two containers (main-container and sub-container). Body, HTML and main-container have classes of 100% height whereas sub-container fixed in 1000px. Main-container should be fit with 100% height in the whole screen even sub-container is small or large. Now problem is, main-container is not increasing its height according to sub-container height. Please check the example below to understand my requirement.
http://jsfiddle.net/awaises/dLeHL/
Really appreciate your help.
Thanks
change height:100%; to min-height:100%; in .main-container: http://jsfiddle.net/dLeHL/3/
EDIT:
Percentage heights rules are explained here:
Percentage Heights If the height of an element is set to a percentage,
it needs for its parent element to have a set height. In other words,
the height of the parent element can't be set to auto. Like many
aspects of CSS, this is a bit confusing at first.
Is this what you're trying to achieve?
I change the width of the .sub-container in order to be in % like the .main-container.
CSS markup:
html, body {
height:100%
}
.main-container {
height:100%;
background:red;
}
.sub-container {
height:100%;
width:75%;
margin:0 auto;
background:blue;
}
Hope it helps!
You don't need to set the height for the .main-container (by default it will expand to the size of the child container). By setting the height to 100% you are forcing it to be the height of the screen and no more. So just change it to:
.main-container { background:red; }
If you need the main container to always be at least the height of the screen, use #Helstein's suggestion of setting the min-height to 100% while removing the height setting.
Related
I'm trying to use a div as a divider inside of another div and it's not showing up. I figured if I set the height on the divider div to 100% it would automatically adjust to the height of the containing div, which I have set to "auto" for the height.
If I change the height of the containing div to an exact pixel amount the dividing div kicks in and works fine. The reason I want it to adjust automatically is because there will be multiple instances of the containing div with different content which will make the height vary from one to the other so just setting an exact pixel amount for all of them won't be sufficient.
Here's the CSS I created
.container{
width:600px;
height:auto;
margin:auto;
float:left;
display:block;
}
#divider{
width:4px;
height:100%;
float:left;
display:block;
}
Is my coding wrong or is there something else at play that makes this not possible? Thanks in advance for your assistance.
100% is relative to the parent. Try making it 100 vh. Codepen
#divider{
width:4px;
height:100vh;
float:left;
display:block;
}
This is such a simple (and a little stupid) question, but I can’t find a good answer.
How can I make a TABLE element stretch to 100% height of it’s parent container that has a min-height? Consider this:
<div>
<table><tr><td></td></tr></table>
</div>
And the CSS:
div { min-height:400px; background:yellow }
table { background:pink; height:100% }
Fiddle: http://jsfiddle.net/faynV/
I’m not really used to working with tables, so any help is appreciated...
Is this what you want ?
div{min-height:400px;height:400px;background:yellow}
table{background:pink;height:100%;width:100%;}
http://jsfiddle.net/faynV/1/
Set html and body tag's height to 100% and then the outer container height. i.e.
body,html{height:100%;}
div{min-height:400px;height:100%;background:yellow}
table{background:pink;height:100%;}
however you need to set the height of the div same as min-height, if you are specific to fixed height. check here
I have been working on HTML5, javascript and CSS and i want to get the height of screen and set the height of my "div" accordingly in CSS only without using javascript and jquery.. so that it adjusts itself to any screen.
I've tried using height=100% but it takes the height as long as div's content.
Any idea plzz help me out..
Thanks in advance!!
Setting height=100% should work - make sure that the containing elements are also set to 100% height, and add position:absolute
Here's a fiddle:
http://jsfiddle.net/C3anM/
<div id="wrapper">Test content </div>
+
#wrapper {
height:100%;
background-color:green;
position:absolute;
}
i think you are trying to absolute position it.
div{
height:100%;
width:100%;
position:absolute;
border:1px solid red;
}
http://jsfiddle.net/btevfik/DMUcY/
by default the position is static.so the div's are positioned in order and their height is calculated by their content unless you set a px value for height.
http://jsfiddle.net/btevfik/MjM9Y/
You have to set:
html, body
{
height: 100%;
}
jsFiddle: http://jsfiddle.net/sG8gm/
I think you might be looking for viewport-relative css units. They're not supported across the board at the moment, but they are very well-supported among users with modern browsers.
The spec defines them as follows:
vw unit
Equal to 1% of the width of the initial containing block.
vh unit
Equal to 1% of the height of the initial containing block.
vmin unit
Equal to the smaller of ‘vw’ or ‘vh’.
vmax unit
Equal to the larger of ‘vw’ or ‘vh’.
Typical percentage-widths size the element relative to the nearest parent, or, in the case with absolute positioning, the closest parent with position: relative; whereas viewport-relative lengths will always be calculated relative to.... the viewport, regardless of the parent elements in the tree.
I am trying to set an absolutely positioned element's height as 80% and its top and bottom margins as 10% in order to give the element 80% of window height and leave 10% space above and below it as other element's are to appear there.
But as you can see in this fiddle http://jsfiddle.net/qnLC2/ , and as mentioned in W3C CSS Box-model spec, all the margins' widths are actually set as 10% of window width (not height) (try resizing the output screen and making it wider to see the effect as well) .
W3C CSS Box-model spec:
The percentage is calculated with respect to the width of the generated box's
containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.
If the containing block's width depends on this element, then the resulting layout is
undefined in CSS 2.1.
I wanted to know if there was any CSS only way to resolve this problem.
The jsfiddle code:
html:
<div></div>
CSS:
div {
min-width:20px;
min-height:20px;
background:blue;
position:absolute;
height:80%;
width: 80%;
margin:10%;
}
body{
background:red;
}
It doesn't seem there's any way to do it only with CSS. You will need javascript for it as detailed here:
Can I set the height of a div based on a percentage-based width?
Is there any way to get the following effect using CSS?
When container's width is less than image's original width, set image's width to 100% of container's width.
When container's width is larger than image's original width, set image's width to it's original wdith.
May be you can do like this:
for example:
img{
width:100%;
height:auto;
max-width:400px;
}
check this http://jsfiddle.net/aqh2r/
I found that the following CSS code could achieve the goal. But according to CSS Standard, when the value of max-width is percentage, it is "calculated with respect to the width of the generated box's containing block". According to my understanding, set max-width to 100% should take no effect, but it seems wrong.
img{
width: auto;
max-width: 100%;
}
The code is tested in Firefox 12 and IE 9. See http://jsfiddle.net/EnZEP/