http://jsfiddle.net/NykbP/
I am trying to make my margin-bottom css properties on .header, .mainBanner, and the lis scale relative to the height of the document/window but they are scaling relative to the width of the document/window while the heights of the divs are scaling properly...
height:8%
The above scales correctly
margin-bottom:2%;
The above does not.
How can I make them scale relative to the height?
Margin declared in percentages is based on its parent node's width. Go figure.
Here's a great article that should help you out: http://mattsnider.com/css-using-percent-for-margin-and-padding/
Related
I am trying to make a responsive iframe, it kind of works for width by setting width=100%, but doing so for height causes this: http://imgur.com/6pZJUb7
Iframe is placed inside <div class="w3-half w3-center">, I am using w3 css.
I assume that you want to maintain some sort of aspect ratio in your iframe.
Percentages only work in heights if there is a definite height set of the parent element.
The viewport-height (vh) and viewport-width (vw) work very well for making responsive elements because they don't need any container heights to be set, but they can look very different depending on the display.
Something like this will give you a responsive 4:3 aspect ratio:
div.wrapper {
width:40vw;
height:30vw;
}
Adjust the values to suit your needs.
I am having issues with a bug in a project I am working on.
The mobile menu which I want to take the full height of the viewport when it is less than 768px doesn't have a height even though I set it to 100%.
It will only be in view when toggled using the hamburger icon.
The nav element is absolutely positioned and the mobile menu is the last child element of the nav element.
The nav element is absolutely positioned so that the background is transparent and the section below it can be at the top of the page.
I want the div with class mobile_linksto take up the full height of the page when toggled on mobile devices.
I have got a workaround to it which is to set the position property of the section below the nav to relative and set top: -40px.
I will have to set the position property of the nav element to static as well for this to work.
However, I don't like this because it leaves a space between the two section elements on the page.
Is there a way I can get the mobile menu to have 100% height without having to change the position properties that I have at the moment?
Here is the link to the page I am talking about: https://carifood-init.appspot.com/
To troubleshoot your height: 100% problem, have a look at this post:
Working with the CSS height property and percentage values
As an alternative, use height: 100vh.
From the spec:
5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly.
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.
Browser Compatibility (viewport units have pretty much full support among major browsers, except IE 9, 10 and 11, and Edge, don't support vmax)
use jquery for this job: There is an example i used to make height of a section 100% of screen (depending on the device that watch the page it will perform more or less height, so it's responsive).
<script>
$(document).ready(function(e) {
var wheight = $(window).height();
$('.section').css("min-height", wheight);
});
</script>
Hope it helps!
I am new to responsive web design and was looking at an answer.
It doesn't really explain much but provides a solution.
If an img is set as width: 100% I understand that it will occupy 100% of the browser window or its containing element.
The max-width property states that it is used to set the max width of an element.
If I set an img tag to max-width: 100% to what element/context is the percent calculated against?
All I see is when max-width is used the image scales down but never up.
Max-width example: http://jsfiddle.net/ErNeT/1445/
Width example:http://jsfiddle.net/ErNeT/1446/
If I set an img tag to max-width: 100% to what element/context is the
percent calculated against?
By default an img tag has no dimension set on it. So whatever happens, that image will never resize. However, applying max-width will make it behave like it has 100% width. It will resize based on the parent container BUT will stop at the maximum width the image has. For example: if the image was sliced to have 100px width, it will resize up to 100px width.
On the other hand, by applying width (and no max-width property) it will disregard all other width properties of the image and the parent container.
If you set max-width to img then it will be the max-width of its parent. If you don't specify a width for the img then it will not exceed it's native size.
When you set percentage values, both width and max-width are relative to the containing block. However, if the width of the containing block depends on the width of the element, the resulting layout is undefined.
From the specification,
https://www.w3.org/TR/CSS2/visudet.html#the-width-property
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block. If the containing block's width depends on this element's
width, then the resulting layout is undefined in CSS 2.1. Note: For
absolutely positioned elements whose containing block is based on a
block container element, the percentage is calculated with respect to
the width of the padding box of that element. This is a change from
CSS1, where the percentage width was always calculated with respect to
the content box of the parent element.
https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
Specifies a percentage for determining the used value.
The percentage is calculated with respect to the width of the
generated box's containing block. If the containing block's width is
negative, the used value is zero. If the containing block's width
depends on this element's width, then the resulting layout is
undefined in CSS 2.1.
From my point of view
if width > max-width use max-width
Example: Let's say you have 1 div box or Image which is you set the size of the box width > 1000px and max-width 500px. It still follow the max-width.
Example 2 - Using percentage : Let's say that div of your width set 500px, and max-width :100%; what is the result you will get ? The box div will turn 500px that is your starting point. Try shrink it. What is the result you will get next? It's turn responsive.
DEMO
this is what i understand about the difference between width and max-width.
Based on your question and fiddle, I think this is the answer what you're looking for.
Max-width example: DEMO2
- When you start use max-width and set 100%. let say your images size is width is 300px. Meaning that your images starting point are 300px. You aren't override the original image width.
Width example: DEMO3
- When you start use width and set 100%. Meaning that your image are override the original image width.
I have a child-element with position: absolute; that should have the same width as the wrapper but has an ancestor that is positioned as well. Since the ancestors width is content dependent I can't 'back-calculate' a width that would always match the wrapper or even stay inside the viewport. Using a width in vw and the wrappers max-width I get the look I want but it wont work in IE8 or most Android versions.
A JS solution is easy enough but would lead to a visible jump before it's applied and a somewhat broken layout if it isn't applied at all.
So I am wondering: Is there a non-js way of enforcing a dynamic width larger than the parent-element but at most as wide as the viewport?
I know what you're thinking, but the parent container(s) are all positioned with pixels.
I have a div with a height and width in pixels, inside that div I have a youtube iframe that has (for this example) it's margin-top in percentage.
This the HTML:
And this is the result:
I know it's a ridiculously small frame (right bottom of selected div) but it's just an example :)
As you can see, in code I have the margin-top set to 99% but it's actually positioned a lot lower. What could be the cause of this?
The point is that a percentage value for top/bottom margin/padding properties is relative to the width of the box's containing block. It doesn't respect the height of the parent element.
8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'
<percentage> 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.
As you are using absolute positioning, try using top: 99% instead in which a percentage value refers to the height of the box's containing block.
A percentage based margin-top value won't work because it is calculated from the width of the containing element, as previously stated.
If you need a fluid, responsive, scalable margin based on width and can't use absolute positioning try using viewport units in your CSS. Viewport units behave very similarly to percentage based dimensions except that they are calculated from the dimensions of your viewport window and will scale and resize according to the dimensions of your browser window.
vw = Viewport Width: This measurement is based on the width of the viewport. A value of 1vw equals 1% of the viewport width.
vh = Viewport Height: This measurement is based on the height of the viewport. A value of 1vh equals 1% of the viewport height.
You can use decimals of percentages also, like so-
.container {
margin-top: .3vw;
}
Viewport units were not that widely supported a few years ago, but all modern browsers support them now. If you familiarize yourself with them it will open up a lot more options for you.
If you are trying to position an element set to position: absolute, you can use top:, bottom:, right: left: to place it where you want. E.g.
element {
right: 0;
bottom: 0;
}