I have a fixed size absolutely positioned area with scrollbars containing variable sized content.
Now I need to wrap content in two divs that are at least as large as area but expand to fit content.
<div id="area">
<div id="outer">
<div id="inner">
<div id="content">content</div>
</div>
</div>
</div>
Requirements:
They need to expand, so their height must be set to auto.
In order to fill container their minimum size must be 100%
Therefore I've tried following CSS (full example in JsFiddle):
#area {
/* defined outside */
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
overflow: scroll;
}
#outer, #inner {
min-width: 100%;
min-height: 100%;
}
It does work for #outer but has no effect on #inner. How can I fix it ?
UPDATE
I'm only interested in Chrome if that helps.
Also, I can accept that it might not be possible if pointed to some authoritative source with explanation.
UPDATE 2
So I've analyzed CSS specs and concluded that my requirements can't be met:
For min-height to work it must be absolutely positioned or it's containing block height must not depend
on content height CSS2(10.7)
I need autosizing so neither #inner nor #outer can be absolutely positioned. This means that
containing block must have specified height.
Therefore #outer can't be containing block of #inner. This leaves me with #area.
According to CSS2(10.1) that's only possible for #inner when element is positioned absolutely which
conflicts with my objective.
#inner using a percentage height means it is based off of the height of its parent #outer, which is not specified as an exact % or px:
#area {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
padding: 20px;
box-sizing: border-box;
}
#outer,#inner {
min-width: 100%;
min-height: 100%;
}
#outer {
height:100%;
overflow: auto;
}
jsFiddle provided here, which shows with color that #inner gets the full height of #outer.
I also took a few liberties. I set your #area CSS to be a more proper full height/width setup, and i made your scrolling component #outer instead of #area, since #inner will be the content that overflows it.
If you change min-height: 100%; to height: 100%; it will work.
Your min-height should be based on px not in % atleast thats how I got my problem fixed. just use a reasonable pixel-height
In this way inner will always be as big as outer.
i'm not sure i have correctly understood the question, what should expand inner or content ?
Assuming you want inner expanded to fill outer.
As mentioned you also need a height of 100%, and a postion of absolute on inner
and then depending on what is supposed to scroll either on inner or content
#outer {
background: red;
position: static;
min-width: 100%;
min-height: 100%;
}
#inner {
background: blue;
position: absolute;
min-width: 100%;
min-height: 100%;
height:100%;
overflow:auto;
}
#content {
height: 200px;
background-color:yellow;
overflow:auto;
}
example here - with content, which scrolls
#outer, #inner {
height:100%;
min-width: 100%;
}
Related
I have this example for the very known fill-parent height problem: http://fiddle.jshell.net/y9bM4/379/ I've really tried to find a solution by googling but I cannot find anything for these requirements:
The height of the element is not known, neither by percentage nor by absolute size. So position: absolute; top: ?px; bottom: 0px would not work
The upper box should only take up the space it needs for its content, so with my little knowledge about flexbox, it seems that I cannot use it either (just used it in the example because this is kind of as closest as I got)
The outer container has a fixed height (90% of the body in this example)
It would be nice if flex: 1 in each container, is kind of the maximum growth of the upper container. Is this even possible with css yet?
I'm not exactly sure what you're trying to do, but I'm assmuning you would like the second container to use whatever space is left over after the first container is sized to its content.
If so, set the .content class with height:0 and flex-grow:1
UPDATED EXAMPLE:
http://fiddle.jshell.net/y9bM4/385/
I think problem was that you gave the container id height:90%; so it will have to forcefully cover inside it, which is not posibble, So change it with height:auto;.
This will solve your problem
JSFiddle : Updated
CSS : Code to change (Edited)
#container
{
display: block;
position: fixed;
height: 90%;
width:100%;
overflow: hidden;
background: #fff;
border:2px solid green;
}
.content:nth-child(2)
{
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.content{
border:1px solid red
};
.text
{
height: 100%;
display: block;
}
I would like to center and clamp the dimensions of a child div inside its parent.
<style type='text/css'>
.parent {
width: 100%;
height: 100%;
}
.child {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="parent">
<div class="child">
<img src='dog.jpg' />
</div>
</div>
Here are the constraints:
The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100%.
The width and height of the child div are unknown. In one use case, the child div contains an image. In another, it contains a video.
The width and height of the child div must be constrained to the size of the parent, so max-width: 100% and max-height: 100%.
The child div must be vertically and horizontally centered inside the parent.
Ideally, this should work without javascript.
IE can be left unsupported :)
I've tried all the techniques listed in this excellent article, 'Absolute Centering in CSS' , and none of them pan out. Here's why:
Absolute centering: In order for this technique to work with a child of unknown size, you must set display:table on the child. You can then constrain the max-width of the child's contents, but not the max-height, because by CSS 2.1 rules, tables render to fit their contents.
Negative margins: Doesn't allow for variable height.
Transforms: Undesirable because it can result in blurry rendering.
Table-cell: Fails for the same reason that absolute centering fails, i.e. table rendering.
Inline-block: Doesn't work in the important case where the child is 100% width.
Flexbox: Works well until a window resize occurs, at which point you have to force a Webkit redraw to propagate the centering changes. This hack does the job, but it's still a hack. I want to believe there's a more elegant solution to this.
Best solution here is to use :before pseudo element. Check out this article on centering the unknown, http://css-tricks.com/centering-in-the-unknown/
SEE THE DEMO HERE
body,html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
text-align: center;
background: #ccc;
width: 100%;
height: 100%;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.image {
display: inline-block;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
You could use display:table and display:table-cell like so Jsfiddle. Though this will just center the image of the child div.
If you need to have a centered div around the image you could always add another div inside of the child div with the style display: inline-block example
Please look at the following: http://jsfiddle.net/ran5000/uZ7dD/
the header div has a fixed height of 40px, I want that the content div will use the remaining height of the screen without scroll and regardless of the screen height.
any ideas?
I generally use position:absolute for this, and then set the top value to start at the bottom of the header.
http://jsfiddle.net/uZ7dD/4/
.content {
background-color: yellow;
position:absolute;
top:40px; bottom:0; left:0; right:0;
}
Do you mean like that?
If so, I've used
position: fixed;
property in CSS.
I'm not sure what the browser support is like for the calc CSS feature, but this would be a good case for it. You can read about it here. You would need to change the height of the content div to height: calc(100% - 40px). This, of course doesn't take into account any space taken up by margin, padding, or border so it will still overflow a bit. If you make sure your divs don't have any of those it works perfectly. Here is my JSFiddle for it.
You can also use position: absolute and set the top value to 40px and the bottom to 0px but your parent element needs to have position: relative set.
Alternatively, you can use JavaScript/jQuery to calculate the required height of the content div and apply it.
For css3 browsers just use:
.content {
width: 100%;
background-color: yellow;
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
height: -o-calc(100% - 40px);
height: calc(100% - 40px);
}
for non-css3 browsers use this workaround,
HTML:
<div class="container">
<div class="header">i am the header</div>i am the <content></content>
</div>
CSS
.header {
width: 100%;
height 40px;
line-height: 40px;
background-color: blue;
}
.container{
height: 100%;
background-color: yellow;
}
Hope I could help :)
In this case, the properties of table elements have some advantage in the fact that they have a lot of positioning power. In this case specifically, table rows and cells will always adjust to fill the table container.
Obviously, you don't want to be using actual table html elements, as that would not be semantic, which is where css comes into the game:
If you put a container/wrapper element around both your header and content, and then set it to be display: table; with 100% height and width it will act as the base table element.
Setting your header and content to display: table-row; will now associate them with that container and allow everything to share the table properties. Setting a fixed height on one will still work, and the other will simply fill the remaining space.
<div class="container">
<div class="header">i am the header</div>
<div class="content">i am the <content></content></div>
</div>
And the css:
.container { display: table; width: 100%; height: 100%; }
.header, .content { display: table-row; }
This approach also has the benefit of being well supported across browsers.
Is there a way that I could set a DIV element to take up all the height on the page. Something like:
div.left {
height: 100%;
width: 50%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
I've Google'd it a few times but they all seem like really really complicated work arounds for what is probably a really really simple problem with a simple solution.
If the div is a direct child of body, this works:
body, html {height: 100%; }
div { height: 100%; }
Otherwise, you have to keep adding height: 100% to each of it's parents, grandparents,... untill you've reached a direct child of body.
It's simple. For a percentage height to work, the parent must have a specified height(px, %... whichever). If it does not, then it's as if you've set height: auto;
Another way to do it is as you have in your answer: it's to give it an absolute position value, relative to the element that defines the page's height.
This is the simplest way to make a div take up the full height of a page.
height: 100vh;
vh is Viewport Height, and 1vh is equal to 1% of the height of the viewport. See here for more details on this and other units of measurement in CSS.
Make sure you set height: 100% to html and body so that the div has a context for height! Hope that helps.
Pretty sure you need to set the html and body to 100%:
html {
height: 100%;
}
body {
height: 100%;
}
div.left {
height: 100%;
}
Fiddle here.
This problem can be solved using CSS flexbox.
Go through the w3schools documentation of flexbox here and another helpful link css-tricks here
In this scenario.
put display: flex; in the parent div container
div.container{
height: 100%;
display: flex;
}
then in the child div put display: 1;
div.left{
height: 100%;
display: 1;
}
note that if the height of the parent div container is set dynamically, the child div will always have the same height as the parent.
I have a container div (it has both width an height set in pixels).
Is there a way to add a child div that will fill its entire parent but still have margin and or padding ?
suppose the parent div is 200px wide, and 200px high.
if I give the child div a width/height of 100% then it assumes that I mean for the content are to be of size 200px and then if I add padding or margins the size of the child becomes bigger then that of the parent.
I want the child div's content area to be what ever is left after taking out 5px margins on each side...
and please don't tell me to subtract 2*5px from 200px - I know that but I am looking for a better solution.
could it be that css can't handle such a simple task...
You could try the following:
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
.inner {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
}
demo: http://jsfiddle.net/wYNYh/1/
Set all elements to have box-sizing as border-box in your stylesheet.
This will sum up the padding of all elements so you don't have to worry about any disruptions if you add any padding.
*{
box-sizing: border-box;
}
Something like this: http://jsfiddle.net/Rnf82/ ?
You can set the padding of the outer div. Then the inner div will only occupy what's left.
Have a look at this: (try yourself at jsFiddle)
.outer {
width: 200px;
height: 200px;
background-color: #DD0000;
padding: 5px;
box-sizing: border-box;
}
.inner {
width: 100%;
height: 100%;
background-color: #0000DD;
}
<div class="outer">
<div class="inner"></div>
</div>
really these two ways of doing this is equivalent as far as the question is concerned. It is important to remember the redundancy generated by how html and css standards are setup.