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?
Related
The element's immediate parent is an element that has width that can be wider than the window width.
I would like my element containing paragraphs of text to not require horizontal scrolling, ie its width should be automatically adjusted to the window width.
I can do it with a couple of lines of jQuery code, but can it be done by CSS alone?
You can use the vw to get an approximate window width (its not always the window width, but 99% of the time this will work). Only CSS3, though. The units vhand vw act like percentage of the viewport size. More info here: https://developer.mozilla.org/en/docs/Web/CSS/length
Heres an example:
div { width: 100vw; } /* This div will be exactly the width of your viewport, or browser window (most of the time)*/
Use relative positioning whenever possible, any large child elements should be equal to the parent. But you can always absolutely position it:
.someElement{
position:absolute;
width:100%;
height:100%;
left:0px;
top: 0px;
}
Useful article: set an element to window width with CSS only
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 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 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.
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/