Why does Dev Inspector in Chrome shows width of 100% width page in different width than I have on my monitor? I have 1920x1080 monitor and in full screen I don't get 1920 but only 1519 pixels. This number changes by the zoom.
What is reason behind this? It makes hard to code style when I don't have a proper information about a width.
When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting.
Have a look here for more https://www.impressivewebs.com/width-100-percent-css/
Related
Is there any difference between declaring both width and max-width and declaring only one?
As I have understood, using only the max-width property causes all of an element's content to be fit dynamically when the viewport is resized.
Consider the following pen, feel free to resize the window to see what happens:https://codepen.io/harrison-rood/pen/KKzPQMW
The first example is an image with an explicit width of 800px.
The second is an image with a max-width of 800px, but a width of 100%.
See how one is responsive and the other is not? In the first example, we're telling the image it needs to be exactly 800px. In the second example, we're saying that the image should be a fluid 100%, but not any bigger than 800px, no matter what.
You can also use this idea in reverse. The third example has an image with a width of auto (as big as possible) but a max width of 100%, meaning that it will be as big as its container, but not overflow out of it.
The fourth example shows what would happen without max width. See how the image stretches way past its container because it is much larger?
Hope this clears things up! If it does, be sure to leave an upvote!
This is because screen resolutions can be different sizes. Lets say you have an element with a width of 15%, if you increase your window width, 15% becomes larger in pixels. You can set a max-width from preventing it from going over a certain width in pixels.
Using max-width, as the name implies, means that, when a container contains more content than it can fit, its width won't exceed the specified max-width.
max-width is specifically used to prevent a container's width from increasing when it contains more content than it can fit—instead, when max-width is specified, the content will overflow out of the container.
I am trying to make a website with a fluid layout. So to do this I am trying to use percentages as measurements. If I am not mistaken, the percentages are calculated from the parent element. Since the html tags does not have any set width, how does the body tag calculate 100% width? does 100% means the full resolution of the screen that you are viewing the page?
thanks
You have to read the specs to find the answer to your question:
https://www.w3.org/TR/CSS22/visudet.html#x3 says about percentage widths:
<percentage>
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block.
About containing blocks:
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details says:
The position and size of an element's box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin;
(...)
The root element is <html> (https://www.w3.org/TR/html-markup/html.html).
The screen is considered a continuous media.
The relationship between viewport and canvas is simple:
https://www.w3.org/TR/CSS22/visuren.html#viewport
https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally offer users a viewport (a
window or other viewing area on the screen) through which users
consult a document. User agents may change the document's layout when
the viewport is resized (see the initial containing block).
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
So, trying to simplify this, the canvas size considers the content size even if it doesn't fit on the browser window.
The browser window contains the viewport (considered without menus, scrolling bar and status bar).
So, if <body> has 100% width, that means it would be the same width as the <html> element, which width is equal to the viewport's width.
You can easily find the viewport width by inspecting the css for <html> element on Chrome.
100% width for the body tag means 100% of the html width, which again is the full width of the viewport, which on desktops will be the browser window, on mobile devices the screen width.
Using just HTML and CSS would not suffice to get the width, you would need to use Javascript, or even better, a framework like jQuery that would help you get the body's width.
Using jquery the code would look something like this:
$(document).width();
You can find out more about it here.
I am reading A tale of two viewport and I could not follow the explanation at Consequences. He claims that when one zooms into his page, the upper right corner is not blue anymore even though it has width:100%.
I do not understand why this should be the case. In fact, I cannot even reproduce it:
Could someone explain me on a more simple example what the author's point is?
You can see the effect by using "browser zoom" (not pinch zoom), i.e. ctrl+/-. You need horizontal scrolling to see the effect in the author's example.
When you hit ctrl+ a few times, you're increasing the size of a CSS pixel. This means fewer CSS pixels will fit into your browser window (viewport) and thus zooming in shrinks your viewport. For example, say your viewport is initially 800px wide. You zoom in to 200%. Since each CSS pixel is now double the size, your viewport only fits 400px.
The article's point is that even though the viewport shrunk, the content on the page hasn't (in terms of CSS pixels), it's still ~800px (or whatever the author specified it to) since only the pixel size has changed. This means sizes that rely on the viewport will now look disproportional to the rest of the content. In his example, the top bar is set to fill the viewport width 100%. When the content becomes larger than the viewport, the bar will not extend the same width as the content.
Is it possible to make an element behave/sized like the background-size:contain? For reference, here's a page demonstrating background-size:contain (try resizing your browser window and see what the background image does).
That is, I want to make an element with constrained aspect ratio, with width and height such that either width or height will be 100% of the window width (and the other will be whatever is necessary to preserve ratio and keep the entire element visible in the window without scrollbars)?
For example, suppose I want an element to have a ratio of 16:9. If someone's browser window is super wide and not very tall, then I want my element's height to be 100% and the width would be less (whatever is necessary to keep the element's ratio 16:9). If someone's browser window is really tall and not very wide, then the width would be be 100% and the height would be less (again, whatever is necessary to preserve that element's target ratio).
I'm thinking the only way to do this is with javascript. Is there some magical CSS way to accomplish this that I don't know about?
I guess you want to have a liquid template view.
Checkout this example if it suits your need
http://www.maxdesign.com.au/articles/liquid/liquid-sample1/
Thanks.
My page uses the .css position:absolute; and percentage height attributes, eg. height 80%; . It looks great when its full screen but it look terrible when its minimized. When its minimized I would like to get a scrollbar. Is there someway to have an element be 80% width of the screen when the screen is maximized, but if the screen is resized, then maintain the initial size and get a scrollbar.
Perhaps using the min-height attribute will help? This should prevent the 80% height from shrinking indefinitely and allow you to specify an overflow attribute to get the scrollbars.