Using:
$(my_div).width(window.innerWidth)
Does not provide the desired result, because it does not account for the vertical scrollbar, so the element overflows the window, creating a horizontal scrollbar, as illustred below.
Illustration http://dl.dropboxusercontent.com/u/62862049/Screenshots/om.png
You could use width:100%
<div style="width:100%;height:1500px;background:red"></div>
Demo
window.innerWidth includes the width of the vertical scrollbar in some versions of Firefox:
https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth
however, w3schools seems to disagree (it says it doesn't include the width of the scrollbar):
http://www.w3schools.com/jsref/prop_win_innerheight.asp
There's even a bug concerning this in the Mozilla bug tracker:
https://bugzilla.mozilla.org/show_bug.cgi?id=156388#c14
The confusion above has been cleared a bit with CSS3, which has a specific property to calculate widths, box-sizing. Set box-sizing like this:
box-sizing: border-box
Which does the following (quoted from w3schools):
The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties
You can use width:100% as noted, but bear in mind that this will ALSO include any extra spacing and padding you got - however, in CSS3-enabled browsers, this is resolved with the correct box-sizing property, as noted above. So, if you got, say a div like:
<div style="width:100%; padding: 20px;">
<div style="width:100%; background:red">Test</div>
</div>
The inner div will go off-bounds according to the CSS21 spec. Here's a jsFiddle that illustrates this problem.
So, make sure that you don't have any padding to avoid such issues.
If you want to use jQuery to get the width of the window, you could use jQuery's width() method (or css("width")).
Could you use
$(my_div).css('width', '100%');
?
$(my_div).css("width", "100%");
or
#my_div {
width: 100%;
}
You're also probably going to want to make sure your body or parent div has no padding or margin:
body {
padding: 0;
margin: 0;
}
Related
I'm trying a more fluid design.
I want specific divs to be a percentage of the overall body. I also want to set fluid / liquid padding within each div.
<body>
<div class='image'></div>
<div class='fourty'></div>
<div class='sixty'></div>
</body>
CSS:
body {
margin-top: 85px;
min-height: 100%;
}
.image {
content: image_url('something.jpg');
width: 100%;
height: auto;
}
/*I'm assuming the padding I'm setting is a percentage of the .fourty
div not the overall body. Granted, width is 100%.*/
.fourty{
padding: 4% 8%;
min-height: 40%;
width: 100%;
}
.sixty{
padding: 4% 8%;
min-height: 60%;
width: 100%;
}
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
How do I correct / achieve this? I'm open to a JS solution, but would be more interested as to how to accomplish this in CSS.
As far as CSS goes, there are no styles that you can apply to make an element's height equal to a certain percentage of the total document (body) height.
CSS does, however, offer you options to style an element's heights to a certain percentage of the viewport height (using VH units), but since this does not achieve your goal, I'll leave you with a javascript answer that does.
Relevant javascript functions:
function getDocumentHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};
function setDivHeight(target, percentage) {
var desiredHeight = getDocumentHeight() * (percentage/100)
target.style.height = desiredHeight + 'px';
};
To set the height initially and on viewport resizes:
var targetDiv = document.getElementById('target');
setDivHeight(targetDiv);
window.addEventListener('resize', setDivHeight.bind(null, targetDiv))
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
That is correct. The reason is that your code is in violation of the spec.
From the W3C height property definition:
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 and this element is not absolutely positioned, the value computes to 'auto'.
auto The height depends on the values of other properties.
In other words, if you're going to use percentage values, you'll need to use the height property from top to bottom.
From the browser's perspective, min-height (and max-height) don't adhere to this rule and, therefore, as the spec says, they compute to auto.
DEMO (with your code, revised)
Read more here: Working with the CSS height property and percentage values
As an aside, I think its safe to say that the height definition is thoroughly obsolete. It hasn't been updated since 1998 (CSS2) and there are many ways for establishing the height of a box. Confining percentage heights to only the height property doesn't make much sense anymore.
Firefox seems to agree. Recent versions now accept flex heights, as well. See examples here:
Height is not correct in flexbox items in Chrome
Chrome / Safari not filling 100% height of flex parent
Flexbox in Chrome--How to limit size of nested elements?
I'm trying to set the height of a button as a % of the user's window. It seems this works :
#mybutton {
padding: 10%;
}
But obviously doesn't quite achieve what I need (in addition, it's not responsive to the browser's size).
This doesn't work :
#mybutton {
height: 10%;
}
I've also tried doing it with javascript (I really don't master it), but none of those two tries work either.
document.getElementById('mybutton').style.height = "10%";
document.getElementById('mybutton').style.height = window.outerHeight / 10;
How can I do that ?
PS : I've also tried with fixed values (100px) to see if I could change the height, and it seems I can't at all.
NB : I'd like it to be responsive to the user's window, meaning that if I reduce the size of my browser, the button should keep a height of 10% of it.
Thanks.
You can use viewport units:
#mybutton {
height: 10vh;
}
Viewport-relative lengths are supported by all modern browsers.
Though the answer has been selected I wanted to note three things here.
Note #1
#mybutton {
height:10%;
}
does not work because the height is relative to the parent and the parents, html and body, are not 100%. Checkout this fiddle, http://jsfiddle.net/3sLafksx/1/
Note #2
The reason padding worked is because padding is not relative to the parent's height but to the parent's width. Which in case of a div element or plainly in the body is 100% of the window size.
Refer: https://stackoverflow.com/a/8211457/1799502 and http://www.w3schools.com/cssref/pr_padding.asp
Note #3
Using the viewport height vh and viewport width vw units is a very good idea but #rnevius was not kidding when he said all modern browsers, you need at least IE9 or Android 4.4
IF your element is a span, it won't work like you wish, but using a div, your code will work.
document.getElementById('b').style.height = (window.outerHeight / 10) + 'px';
Using css, your button will be X% of your parent container, so if you have a parent container with 300px height, your button'll be 30px height (using height: 10%).
You can also use the vh unit like #rnevius pointed out. But remember that a span won't work as you want, because it isn't a block element. (unless you force it by using display: (inline-)block).
Try putting a !important
#mybutton {
height: 10% !important;
}
This has to be the most simple case of css issue. But I could nt find a solution to this problem..
I have a main div which has min-height of certain value. Ive given the min-height in in % so there is no outer div and it will not show the min-height. if I give min - height in px , it will show up.
but I am trying to get the min-height to be 50% of window height and it could vary in each devices, so giving height in px is not an option for me... if I give jquery.css() function, and keep it document.ready() function, when the page starts loading, it will have zero height and it will come down to height that Ive specified and that doesnt look good in website..
Case 1 : http://jsfiddle.net/pT56y/
FIDDLE EXAMPLE
case 2 : http://jsfiddle.net/pT56y/2/
Is there a proper way to deal with this issue?
in order to use a percentage height, the parent must have a set height (either in pixels or %):
body,html{
height: 100%;
}
.container-fluid{
background:#000000;
width:100px;
min-height:50%;
}
Fiddle
<style>
.info{
width:94%;
}
</style>
Now doing like this using JQuery
$('.info').css('width');
returns 94px rather than the equivalent value in pixles (500px in my case.)
if i set the width in css as 105% , JQuery would return it as 105px .
The height and width of the parent container is 600px and 500px respectively.
I think a possible cause is the container of the element being hidden at the moment you're trying to obtain the dimensions.
I had a similar situation with nested divs and tables.
See the following fiddle where I managed to reproduce the behavior:
http://jsfiddle.net/36yvb/
I still think it's a bug in jQuery returning a percentage as an integer number (without the % sign) when not being able to actually compute the dimensions of the element.
Change the width of #another-cell (expressed in %) and see it return the same value without the % sign when the table is hidden.
Actually, it doesn't seem so: see this fiddle.
html:
<div id="info"></div>
css:
html, body {
position: relative;
width: 500px;
}
#info {
width: 94%;
}
js:
$( function() {
document.write( $('#info').css('width') );
});
what is info width relative to? is it an element with 100px width maybe?
The width that it returns depends upon what part of the HTML is it written in. Meaning to say is that if it is written inside tag then then 94% percent would reflect 94% of that particular div.
But again if another tag in the same tag is already using some amount of defined width then the info might even get lesser space if the tag in defined before the info tag.
Please give up more amount of actual code to get a better answer
The only thing that explains this behavior is that you have more than one element with the class info
When this happens and you do a $('.info').css('width'); jQuery will return to you the width of the first element in the set.
If this is the case, you may need to be more specific with your selector.
DEMO
Each broswer will return textually different, but logically equal values e.g., #FFF, #ffffff, and rgb(255,255,255) when using .css()
Instead of using .css('width') use .width()
According to jQuery: http://api.jquery.com/width/
The difference between .css(width) and .width() is that the latter
returns a unit-less pixel value (for example, 400) while the former
returns a value with units intact (for example, 400px). The .width()
method is recommended when an element's width needs to be used in a
mathematical calculation.
The width of the div "topNav" changes by few pixels when its position style is changed from relative to fixed. I found a jquery plugin (http://imakewebthings.github.com/jquery-waypoints/) which can perform the same functionality I'm looking for elegantly, but I feel it is a overkill for this purpose.
EDIT: My question is how to avoid changing the div sizes.
Check out the code at :
http://jsbin.com/azace5/edit
You need to remove the page's "default margin". This will do it in "every browser":
html, body {
margin: 0;
padding: 0
}
See: http://jsbin.com/azace5/2
Or you can add a minimum width.
min-width:600px;