Trouble setting container as a percentage
Yes, I know, the parent of object has to have extremely set height in pixels.
It's a DIV and it's child of <body> and I really need to have it set with percent height.
Is there way to bypass it, except defining ultimate height in <body> by pixels?
Setting up the body height within the .css file to 100%.
Then set the containing elements to a percentage of that body height.
Related
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 do not understand the basic concept of giving body and html a height of 100%. Why do we give 100% to our parent?
<body style="height:100%"> and the <html style="height:100%">.
What happens when I give 100% height to my html and body, and why do we give it?
Giving 100% height to body and html isn't an must-do. But assuming you want to use percentage values on your site you have to assign 100% height to both.
Why?
Refering to Mozilla Developer Network:
Many CSS properties can take percentage values, often to define sizes in terms of parent objects.
That means: If you assign height:20% to header (assuming html>body>header), the browser will calculate that 20% in terms of the parent (body) and the height of the body in terms of its parent (html).
But height has an initial value of auto. When you take a look into the Developer Tools of Chrome etc., you'll see that the body has a calculated height of 0 (zero) by default. Consequently the headers height isn't calculated correctly.
That's why it makes sense to define a line like the following in a reset.css or something alike:
html,
body {
height:100%;
width:100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.
However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
Look here
Make body have 100% of the browser height
I've been playing with front-end web design the past couple of days, mainly using floats/clearfix to position my content. I've been marking up the width of the content using % and that has worked perfectly.
However, if I try to define the height as a percentage of the overall page, it fails to work, more accurately it seems to just wrap around what ever content is there and I have to define the height as a px value.
Is there a reason for this? Is there a workaround where I can use a percentage value and it actually divides up the page?
To define the property height in % you need a previous definition on the parent height. Then if you have a parent with fixed height on px you can work with %; but if you want to work % in relation to the window or other % values you need to set a value for all parents.
Then if you want to work with the window % you need this:
HTML like:
<body>
<div id="container">My div with 100% height</div>
</body>
CSS like:
/*Need to set all parents to 100%*/
html, body {
height:100%;
}
/*Then set the container*/
#container {
height:100%;
}
please try this:
give the HTML tag in CSS 100% and then you should try to set the body element in CSS to
display:block;
and give it
min-height:100%
see this topic too:
min-height does not work with body
br paulq
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/
We can set the padding and margin properties of an element E using either pixels or percentages.
A) I assume that when we use percentages, the percentage value refers to the width of the containing block? Thus, if E is declared directly inside <body> element, then the containing block is <body> and percentage value refers to width of <body>element.
B) What is the default width of a <body>element?
Thanks.
EDIT:
If I set E’s padding to 50%:
#E
{
padding: 50%;
}
then the width of E's "padding-left + padding-right" will equal the width of a viewport (when viewport is expanded over the entire screen).
A) Thus, I assume the width (specified in pixels) of <body> depends on a horizontal resolution of a monitor and the width of a viewport? My screen resolution is set to 1024*768, and thus in my case the width of a <body> is 1024px (assuming viewport is expanded over the entire screen) ? But if I was to change the resolution to 800*600, then the width of a <body> would be 800px?
Yes, the CSS will be applied to the element containing it.
The default width in percentages for the <body> tag is 100%.
In general, you should be using a CSS file linked to your HTML, and use CSS Selectors to chose what elements to style. It is bad practice to embed CSS into your HTML, as this is not very maintainable (i.e. if you need to change the style across a website).
Edit:
#E { padding: 50%; }
is a shortcut to:
#E { padding-top: 50%; padding-right: 50%; padding-left: 50%; padding-bottom: 50%;}
In regards to what the % stand for, it's viewport width, i.e. the number of pixels in the inner browser window, showing the HTML, nothing to do with your screen resolution.
If you were to change your window resolution to 800px*600px your viewport width would be somewhat less than 800px, as the scrollbar takes up some of that.
The default width of body is 100%, but html is the parent container of body, so it will affect body in some circumstances if you're not aware of it.
“My screen resolution is set to 1024*768, and thus in my case the width of a <body> is 1024px?”
As Tor mentioned, the <html> element can have margin, borders and padding of its own.
In addition, the browser window’s scrollbars can take up some space too.
A) I assume that when we use percentages, the percentage value refers to the width of the containing block?
It varies depending on the property the percentage is assigned to. For font-size, for example, it is the computed font-size of the parent element.
Padding is calculated based on the computed width of the parent block — even padding-top uses the width. (Remember, the width is the content width and excludes padding, borders and margins).
B) What is the default width of a element?
The default width of the body element is auto which is "Whatever space is left once margin, padding and borders have been taken into account". Since browsers have non-zero padding and/or margin there by default (which of the two depends on the browser), this is not 100%.