I've got a component hierarchy:
appParent.html
<app-parent>
<div class="someDiv"> // has width and height set
<app-child></app-child>
</div>
</app-parent>
appChild.html:
<div class="childWrapper"></div>
I would like to style app-child to have width an height equal to its container. My ultimate goal is to have .childWrapper the same width and height as .someDiv, but I do not want to bring JS into business
I applied
app-child{
width:100%;
height:100%;
}
but app-child remains 0x0px. I tried setting some random width and heights and app-child remains 0x0px at all times. Applying styles to .someDiv works as expected.
What is going on here? Why can't styles be applied to component selectors?
Given the above CSS on the child, it IS taking up 100% of the parent's height. The problem is that the parent does not have an explicit height set. Try setting the height of someDiv.
See this codepen: Full height child div
.someDiv {
border:1px solid red;
height:100px;
width:200px;
}
.childWrapper {
border: 1px solid blue;
width:100%;
height:100%;
}
Related
I have a header that should stay at least as wide as the below div is or wider. Everything looks fine as the windows is larger than the content but when the window gets smaller so does the top div.
#top{
border:1px solid black;
height:200px;
width:100%;
}
#content{
margin:auto;
width:1000px;
height:600px;
border:1px solid red;
}
<body>
<div id="top"></div>
<div id="content"></div>
</body>
Any suggestions?
http://jsfiddle.net/Z242Y/
I believe your problem is with the fixed width you have on the content where as the top div has a percentage width, so to fix just change the content div to a percentage width that is a little smaller like I did, I set it to 80%
#content{
margin:auto;
width:80%;
height:600px;
border:1px solid red;
}
Here is your updated FIDDLE
Hope that helps.
When you give an element a width of 100% in CSS, you’re basically making this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.
Try setting the width of the #top using javascript.
var x = $('#content').width();
$('#top').width(x);
JS Fiddle
Firstly, you can wrap your html in a container as such:
<div id = "divContainer">
<div id="top"></div>
<div id="content"></div>
</div>
Then, you can give it a fixed width, so that it will decide the width of its contained elements. In this way, both the top and content div will always have the same width.
For that, you will need your CSS to be as such:
#divContainer {
width: 1000px;
}
#top {
border:1px solid black;
height:200px;
width:auto;
}
#content {
margin:auto;
height:600px;
border:1px solid red;
}
You can see it here: http://jsfiddle.net/G4L4V/
Note: In this approach, the two divs will always have the same width.
In case you want to enforce the 1000px width and still have the content width to be smaller than the top div, then you could make a slight adjustment in the #content class as such:
#content {
margin:auto;
width:90%;
height:600px;
border:1px solid red;
}
I have a table inside a div, and the table won't fill the container div. Why not?
HTML:
<div class="fill">
<table class="table">
...
</table>
</div>
CSS:
.fill {
position:relative;
width:100%;
height:100%;
}
.table {
position:absolute !important;
left:0 !important;
right:10px !important;
bottom:0 !important;
top:39px !important;
}
The table only fills a small portion of the container div. Why?
UPDATE:
Or, If I try the following, it doesn't work in Firefox, but it does in Chrome.
HTML:
<div class="fill">
<div class="wrap">
<table class="table">
...
</table>
</div>
</div>
CSS:
.fill {
position:relative;
width:100%;
height:100%;
}
.wrap {
position:absolute;
left:0;
right:0;
top:39px;
bottom:0;
}
.table {
position:relative;
height:100%;
width:100%;
}
This second version is closer to what I want (since it DOES work in Chrome).
In regards to your original question, this is the answer to your 'why not':
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'.
Source: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
Your 'fill' div is set to 100% height, but what is its parent element's height set to? And if its parent element's height is also a percentage, what is its parent's height set to, and so on?
Add borders to your updated example and you could see, the height of 'fill' is 0 as it has no parent with a specified height, and so the height of 'wrap' is also zero. Add a parent wrapper to wrap the whole example with a height of 500px or so and it works as expected in (at least) Firefox and Chrome.
CSS:
.fill {
position:relative;
width:100%;
height:100%;
border: 1px solid red;
}
.wrap {
position:absolute;
left:0;
right:0;
top:39px;
bottom:0;
border: 1px solid blue;
}
.table {
position:relative;
height:100%;
border: 1px solid green;
}
.parent {
height: 300px;
}
HTML:
<div class="parent">
<div class="fill">
<div class="wrap">
<table class="table">
<tr><td>...</td></tr>
</table>
</div>
</div>
</div>
Tables are special, they don't behave like other block elements. Normally, a table will be just wide enough to hold its contents, and no more. Setting a width of 100% for the table should force it to fill the space allotted for it.
On .table, put width=100%
You may have to set a width for the td as well.. Depending keeping your layout structured
Your parent div of the table has a width and height of 100% which is going to be whatever the parent element is. The table needs to not be position: absolute, and therefore no need to have top, left, right, bottom set.
table {
border: 1px solid blue;
width: 100%;
height: 100%;
margin: 0;
}
Here's my fiddle of what you wanted, minus the top and right offsetting you have.
http://jsfiddle.net/jaredwilli/5s4DD/
You can instead use margin to set the top and right but you then cannot use the 100% width, that will not work. You can use display:inline-block, while not having a 100% width but instead dynamically setting the width to be 10px less than the width of the fill div's width using javascript but that's another thing. Same goes for the top positioning. You could do some other things too, but there's a lot of playing with things that you would need to do.
Also, you can use table, no need for a class unless you have multiple tables in the page.
And remove all of the !important's from your CSS.
It's never necessary to use !important, just saying.
With CSS alone, is it possible to obtain the following example, http://jsfiddle.net/LdJ7t/, without explicity knowing the child element's width before hand?
The final result desired:
parent element scrollable to child element
child element's width set to content
#Parent {
width: 100px;
height:200px;
background: #ccc;
overflow:auto;
padding: .5em;
margin: .5em;
}
#Child {
width:300px;
height:100px;
background:yellow;
}
<div id="Parent">
<div id="Child">
This is a test. This is a test.
</div>
</div>
It looks like display:inline-block; almost works: http://jsfiddle.net/LdJ7t/1/
I think this is possible. I just can't find a solution.
Your inline-block solution is correct - if you put longer words in or an image, the scrollbar will appear. Text is broken on white space by default.
If you don't want text breaking on white space, you can add white-space: nowrap; to the child div like here: http://jsfiddle.net/LdJ7t/2/
Is it possible to simply auto-height a child div to the remaining height not being used by other component of it's parent? For the below example, the .body would only be like 20px high, because it's only using that much for the inner html. Is it possible for the .body to automatically consume the unused height of the .parent? e.g. .parent 200px - .head 30px - .foot 30px = .body 120px?
The sample below will display the .parent yellow box much taller than the used space. If you set .body to "height: 100%", it'll use the parent's height and not respect the .head or .foot elements.
<html>
<head>
<style type="text/css">
.parent {
width: 200px;
height: 200px;
background-color: yellow;
}
.head { height: 30px; background-color: blue; }
.body { background-color: #999; }
.foot { height: 30px; background-color: green; }
</style>
</head>
<body>
<div class="parent">
<div class="head">I'm the head</div>
<div class="body">I'm the body</div>
<div class="foot">I'm the foot</div>
</div>
</body>
</html>
This is only an example. In my project the .parent height can only be reasonably set in the .parent element. Plus the .parent height is essentially dynamically set by the back-end code. The three inner div organization is because the body is collapsible and I have rounded corners for the head and foot.
Any suggestions are well appreciated!
This can easily be achieved with negative margins!
Set .body to 100% height
Assuming that the height of .head and .foot is known, you can add a negative top + bottom margin equal to the respective heights of .head and .foot.
Because of the source ordering, the .body will "cover" .head. To counter this, add position: relative to .head.
The inner content of the body need to be shifted down a bit. You cannot add padding to .body directly. Better, add another dive inside .body with padding top + bottom set to desired height.
Demo here
Variant of the above example:
Set .body to 100% height
Assuming that the height of .head and .foot is known, you can add a negative bottom margin equal to the sum of heights of .head and .foot.
Since .body will attempt to flow outside the parent, add overflow: hidden to the parent.
Demo here
There are currently two ways to achieve this. Both are somewhat unsatisfactory.
The first is to calculate the remaining height using DOM information via JS.
The second is called CSS3 flexbox and works perfectly, but is an immature specification with currently very little support.
Unfortunately this can't be done using CSS 2.1 and that's one of the reasons why CSS sucks so badly.
Why when I want to resize div, image in div doesn't change its size !? It's CASCADE style sheets, isn't it?
--EDIT--
.box{padding:0px;margin-left:10px;display:inline-block;margin-right:auto;width:20px;height:20px;border:1px solid red;}
<div class="box">
<img src="larrow.gif"/>
</div>
It's cascade, but width and height are not inherited.
You might want to do something to make the image follow the size of its parent.
Like
div.box img { width: 100%; height: 100%; }
<img> tags have an implicit width of either the image's natural width or the width attribute of the tag that must be overriden with css. Try this to make the image 100% of the width of its parent <div>:
div img{
width: 100%;
}
I think you have a bit of a misunderstanding of what cascading actually is. I'd recommend reading the part of the spec that deals with the cascade.
Your style selector only matches elements with the class box. The div has that class, but the img doesn't. Thus, the div has the style applied and the img doesn't. Try:
.box
{
padding:0px;
margin-left:10px;
display:inline-block;
margin-right:auto;
border:1px solid red;
}
.box, .box img
{
width:20px;
height:20px;
}
<div class="box">
<img src="larrow.gif"/>
</div>