I tried to set height: 100%; in the label, but it didn't work. Why not?
.field label {
color:#3E3E3E;
font-weight:bold;
width:80px;
display:block;
float:left;
margin-top:5px;
margin-left:3px;
height:100%; /* <-- doesn't work */
}
.field {
display:block;
margin-bottom:9px;
background:none;
border:none;
}
<div class="field large">
<label>Textarea</label>
<textarea></textarea>
</div>
You have height set to 100% but 100% of what? It's always the parent of that element so what is the parent's height set to? If it's not set to anything then the browser has nothing to reference.
In this case I believe your div's height is being determined by the height of the tallest element within it: the text-area. (Reference) Perhaps you want to figure out how many pixels tall your text-area is (for instance this can be done with Firebug, or IE or Chrome's developer tools), and then set your label to that same height.
I'd also explicitly set that height for the text-area to be sure it's the same in all browsers.
The reason height: 100% isn't working as you expect is that the parent element has a height of auto. This results in your label also getting a computed height of auto.
<percentage>
Specifies a 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'.(Reference)
Related
If I have an image on a page with width set to 100% in css it is as wide as the browser. Fine. However, if I make a containing div have display:inline-block, then the image is no longer set to have a width:100%. Instead, it just shows as the actual width of the image:
img {width:100%;}
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div style="display:inline-block;">
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
So, basically, the inline-block containing div wants to be as wide as its contents, and the width:100% on the image wants to be as wide as the containing element, so it seems they are both confused and just defaulting to the width of the image. I know I can set the width of the containing div to be 100% and have the desired outcome, but for what I am actually doing, that is not an option. Is there any way to force the img to be 100% width with only css on the image itself? I guess I am basically trying to set a class on a parent of an element, which I do not think is possible... Ideas?
This is because a percentage value on width is relative to the width of the box's containing block. While a block-level container (<div> element, for instance) takes the entire width of its containing block, an inline-level element doesn't.
Therefore you have to specify the width of the wrapper <div> explicitly. As a thumb rule, when you say 100% you should ask yourself 100% of what?
img { width:100%; }
div { display:inline-block; width: 100%; }
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
Alternatively, in cases where you want to set the width of elements as the width of the viewport/window, you could use viewport percentage units instead. For instance:
img { width: 100vw; } /* 1vw = 1/100 of the width of the viewport */
Demo:
img { width: 100vw; }
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
I dont think this will help your problem , but technically you could do it by giving it position:absolute;
img {
width:100%;
}
div img {
position:absolute;
margin:0 auto;
width:100% !important;
}
http://jsfiddle.net/kjf8s3rq/
The problem is that you are trying to use dislay-inline in a way contrary to its intended use. If you want the image to take up the full width of the window, then clearly its container must also take up the full width. Which means you want your div to behave like a block element. So the solution is either to do just that and leave the div as display:block (its default value to start with), or at the very least you must set it's width to width:100%. Afterall, if you want to take up the full width of the screen then you want it to be a block.
Inline-block elements have to have their width set, either by specifying a width in the CSS, or by letting them take up as much width as they need to hold their content. In your case the image has its natural size, and your surrounding inline-block div is therefore taking up just that size and no more.
Setting width:100% on the image doesn't change that; that just tells it to take up the full with of its container, not the whole window. But your containing div is already the natural size of the image.
I never had to use this, but sometimes it comes handy... when it works.
Whenever I write the code, sometimes happens that height: 100%; works, and sometimes doesn't.
Why this happens? I suspect I have to edit some other properties, but which?
Taken from w3c, here's their definition:
Specifies a 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. Note: For
absolutely positioned elements whose containing block is based on a
block-level element, the percentage is calculated with respect to the
height of the padding box of that element. This is a change from CSS1,
where the percentage was always calculated with respect to the content
box of the parent element.
http://www.w3.org/TR/CSS2/visudet.html#propdef-height
Basically it will take 100% of the height available to it. If the element it is within has a height of 100px, then it will be 100% of 100px. Thus 100px.
If the element with height:100% has position:absolute then it will mean it takes the height of the closest parent element with position:relative or else the height of the visible window.
As pointed out in another answer. This only applies to block elements (or those with display:block applied to them).
I suspect that you observe "sometimes height: 100%; works, and sometimes doesn't" depending on the type of element? Inline elements, such as <span>, <b>, <abbr> and so on does not have height or width. See this example :
body {
height : 400px;
}
span {
height: 100%;
background-color: red;
}
div {
height: 100%;
background-color: green;
}
<span> </span>
<div> </div>
and the result -> http://jsfiddle.net/Ykca3/
even though the <span> is set to height:100%, and its parent have a fixed height, it is not rendered as with 100% height.
Please, have a look at http://jsfiddle.net/g995s/.
<div id="textarea_wrapper">
<textarea>How and where my width is derived from?</textarea>
</div>
#textarea_wrapper{
height: 250px;
border:thick solid green;
}
textarea{
background-color: #930;
border:none;
margin:0;
width:auto;
resize:none;
overflow:hidden;
height:95%;
padding-top:5%;
}
It is impossible to me to explain two things: The first one is why textarea goes outside its parent since height+padding-top=100%?
The second one is how and from where this certain width of textarea is derived?
Thank you
In regards to the first issue, the percentage based padding-top value is relative to the width, not the height, therefore the positioning won't be consistent if the width of the browser is changed - try resizing the window to see this.
8 Box model - 8.4 Padding properties
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.
The padding-top percentage is based of the width of the parent element, not the height.
So it goes outside because 95% of the smaller height + 5% of the larger width = more than 100% of the height.
The width is the default width for the textarea because setting width: auto on textareas does nothing.
Set the textarea width and height to 100% and use a fixed measurement like px or em for the padding if you don't like how the top and bottom percentages work.
Then use box-sizing: border-box on the textarea to make its width, height and padding stay within 100% of its parent; http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Its the padding-top that is increasing the size of the text area
*edit: beaten to it! :)
I have a website with 5 horizontal divs whom all float:left and have a % width. The left one I want to have text in, and a scrollbar. However, the scrollbar only shows up when I give it a position:absolute. Try it in the jsfiddle. When I do that, the div ignores the other 4 and they get out of line. How do I work around this?
The jsfiddle > http://jsfiddle.net/QN8RS/
Add position:absolute; to the following div in CSS. You will see it working, but the divs get out of place..
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
overflow:auto;
top: 0px;
bottom: 0px;
}
You haven't specified the height of the <body> so its height is computed as auto.
You specified the height of .main as 100%. This is a percentage so, because the height of its parent (the body) is computed as auto, the computed height is also auto.
You specified the height of #left as 100%. This is a percentage so, because the height of its parent (.main) is computed as auto, the computed height is also auto.
Since the height is auto, the height as is tall as it needs to be to hold all the content.
Since you have set overflow: auto, you only get scrollbars if the content is taller then the element (which it isn't).
Set height: 100% on the html and body elements so that the computed height of #left is the height of the viewport and not auto.
I think you are looking for :
overflow-y: scroll
Little Fiddle
The reason is that you have specified height:100% on your div .main. 100% of what? Which parent?
If you specify the height of body to 100% then it will work.
html, body { height: 100%; }
Check your updated fiddle: http://jsfiddle.net/QN8RS/2/
Instead of using floats, use position: absolute; and left: number%; (you will have to figure out how much % the left is of each element).
Check out the Fiddle:
http://jsfiddle.net/QN8RS/3/
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.