I am having a strange rather weird problem. The problem is a small one that is I want to set min-height to 100% that is the content of the page should span whole screen of he user and if possible the page should extend down if content exceeds 100%. A simple way would be to set min-height:100% and to set height:auto that is exactly what I want but regardless of how many times I try it the problem remains there.
I am using height auto and min-height:100% on all the elements but it doesn't work. If I remove min-height to include only height:100% then it works like a charm but then when the content is larger it overflows whole footer.
Please help me here is css:
html, body, container, row, col-lg-3, col-lg-9 {
min-height: 100%;
height: auto !important;
height: 100%;
}
.container {
max-width: 1170px;
min-height: 100%;
height: auto !important;
height: 100%;
}
.col-lg-3 {
min-height:100%;
height:100%;
}
.col-lg-9 {
min-height: 100%;
height: 100%;
}
Here is the page showing the problem :
http://contestlancer.com/ai/GP/
Yes this is a pain but that's how it works. Height can be inherited from positioned parents but not when these have a min-height property.
Children of elements that have a min-height set to 100% cannot inherit their parent's height via percentage...
https://stackoverflow.com/a/8468131/1491212
CSS2.1 specs :
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
Use position: relative; height: 100% on containers to work around the problem, and add min-height: 100%; to the deepest child.
Related
I'm working on a mobile site that has a structure that looks something like this:
body
---->Mobile container div (height 100%)
-------->Full page div (height 100%)
------------>Vertically centered div (height 200px)
My problem is that the full page div level comes out as 0px. Here's the relevant CSS:
html, body
{
height: 100%;
margin: 0;
}
.mobile
{
min-height: 100%;
}
.full-page
{
height: 100%;
position: relative;
}
.center
{
height: 200px;
top: 50%;
margin-top: -100px;
position: absolute;
}
The mobile container is filling the window height, but the full page (100% of the height of the mobile container) is being rendered at 0px height, which ruins the vertical centering.
Why is this happening?
JSFiddle
The red div is the mobile container
The yellow div is the full page div (it's not visible because it's 0px tall)
The green div is the vertically centered div
This is happening because of the following rule:
.mobile {
min-height: 100%;
}
Here's why.
CSS specs tell us the following about percentage height:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
This applies to your .fullpage container. You can see that the parent container of .fullpage, which is .mobile, does not have a height set explicitly, but rather via the min-height property:
The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
You would think that the child container, .fullpage would take the min-height property into consideration when determining its height, but it does not. Browsers will not set the child element’s height (specified in percent) based on its parent’s computed height if only min-height is used.
To correct this, you could add height: 100% to:
.mobile {
min-height: 100%;
}
I'm trying to make a container fill the entire page (or the viewport, whichever is larger), but ran into some trouble. I'm using the recommendations from this post: https://stackoverflow.com/a/17555766, to set the <html> and <body> to 100% height.
But I've noticed that the .Content div only fills the viewport when the <body> height is set with height: 100%, but not with min-height: 100%. Why is that? Why doesn't .Content pick up the height of the <body> when it's set with min-height? Is there a fix for this (without absolute positioning or fixed heights)?
html
<html>
<body>
<div class="Content">Content</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}
.Content {
background: red;
min-height: 100%;
}
codepen: http://codepen.io/anon/pen/mJEMVX
P.s.: when the <body> height is set with height: 100%, both min-height: 100% and height: 100% work as expected for .Content.
Percentage heights refer to the computed height property of the parent element. See the spec. When setting only min-height: 100% on the body element as per my answer to the linked question, the height property is left untouched at its default value of auto. The min-height property does not affect the computed value of the height property.
Because of this, min-height: 100% on your element does not have a parent height to refer to, and so it won't work. Once you set height: 100% on the body element, your element is able to refer to this height for its own percentage height calculation.
How to fix this depends on what sort of layout you're trying to achieve. The only purpose of setting min-height: 100% on the body element is to allow it to expand when the content height exceeds that of the viewport resulting in a scrollbar. If your content will only ever be exactly the height of the viewport, or you don't want body to generate scrollbars, it's as simple as replacing min-height: 100% with height: 100% on body.
I've got a strange problem, in Chrome/Safari, the image respects it's max width/height styling inside of a parent with no set width/height. but not in Firefox/Opera.
<div id="container">
<figure>
<img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001b.jpg">
</figure>
</div>
That's the image and it's containers. The CSS is as follows:
body {
width: 100%;
height: 100%;
}
#container {
width: 90%;
height: 90%;
margin: auto;
}
figure {
position: relative;
display: inline-block;
margin: 0;
vertical-align: top;
line-height: 0;
}
img {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
}
The figure element is only there to serve as an overlay to the image by using the :before selector, but that doesn't work if it has a set width/height. Is there any way to get Firefox and Opera to respect the grandparents height/width instead?
JSFiddle: http://jsfiddle.net/GUrkj/1/
See here on MDN
Specifically:
The max-height CSS property is used to set the maximum height of a
given element. It prevents the used value of the height property from
becoming larger than the value specified for max-height.
And...
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the percentage
value is treated as none.
What the last part means, is that in Firefox at least, without a height value explicitly stated, max-height becomes none - resulting in the observerd behaviour.
As such you will need to add height and width to the figure element at the least.
In CSS when you use 100% you are always saying "100%" of my parent. If your parent is unconstrained so are you. The trick here is that the height is the only one that matters, set the figure height to 100%, but don't set its width and you should be fine.
I have a parent div with a max height/width set. I was wondering if it's possible to set the two child divs to automatically adjust their height based on a percentage using just CSS?
HTML:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
CSS:
html, body {
height: 100%;
width: 100%:
}
#parent {
max-width: 400px;
max-height: 600px;
}
#top {
height: 30%;
}
#bottom {
height: 70%;
}
The intended implementation of this would be for a mobile display that fills the screen height proportionally without forcing a vertical scroll.
EDIT:
I now realize that height percentages of the parent will work if you have a fixed parent height. The question still stands as to whether there is a way just using CSS to allow for a flexible height that matches the screen size. It's seems like this will not be possible only using CSS and require JS intervention.
Theres nothing wrong with your code. Just adding a 100% height as well as width to the divs yields what you want. The max-width/height doesn't force any values (leaves height/width at auto). Here is a working fiddle:
http://jsfiddle.net/b6HVa/
#parent {
width: 100%;
height: 100%;
max-height: 600px;
max-witdh: 400px;
}
I think you are doing right, if anything going wrong, please show a demo. Or try to set
#top{max-height: 30%;}
#bottom{max-height: 70%;}
Or add min-height: {some value}px; to your div.
I have a website with two columns, within a wrapper div.
The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100%.
Here's my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.
If I set the height of the column with images (#rightbox) to a specific height in pixels, this happens.
I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.
How can I make the two columns have the same height?
EDIT: I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper.
You cannot define height as 100% unless your parents provides an actual heights.
#wrapper {
height: 800px;
}
/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
height: 100%;
overflow: auto;
}
Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } before the wrapper can be set to 100%
Given the limited amount of code provided... here is a pure css solution.
http://jsfiddle.net/rlemon/Q7MvS/
.wrapper {
height: 600px;
width: 800px;
}
.panel {
float: left;
width: 400px;
height: 100%;
}
.panel.right {
overflow: scroll;
}