I know it's possible to setup the block width 100% and it will extend the screen horizontally, as in the snippet code below. But, why doesn't it work for the height?
.block1{
width:100%;
float:left;
background-color:yellow;
}
The above block goes into the container, which was used overflow:hidden; but it didn't help. Is there a way to setup the block height to 100%?
From the spec of height:
<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 (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'.
If not, the height of an element with height: 100% would depend on its parent's height, and if its parent's height depends on content's height (height: auto), it would be a circular definition.
First of all, it is not 100% of the screen width, it's 100% of the parent element's width (which, in your case, is probably the same width as the screen).
You cannot do height: 100% because the browser doesn't know how high the parent element is. It's impossible to calculate, so it ends up being ignored by the browser.
You need to use javascript to find out how tall the screen is.
Related
How do I set the height of a div container for example that should be 60% of the screen height?
Setting the 60% as the height in css works fine if the browser window is not resized. But if I shrink the browser window, the div shrinks accordingly.
https://zurb.com provides a nice example. The "Mission Accomplished", grey part is always the same height, no matter how the browser window is being resized. How can this be ensured?
I don't want to use px to ensure HiDpi support.
Thanks,
That's a simple fixed-height element; it has nothing to do with screen size.
You should just use px and not worry about anything; px means logical pixels and will work with arbitrary DPIs.
While the page in question simply used a fixed height (px) for the element in question, meaning that it will always have the same height (and won't be 60% of the height regardless of viewport height). In order to have an element be relative to the viewport, you're looking for viewport-sized typography.
To adjust based on height, you're looking for the CSS unit vh, which tells the element in question to scale based on the viewport height. You can also use vw to scale based on the viewport width.
Keep in mind that <body> has a default of margin: 8px, so if you want to avoid scrollbars when using viewport-sized typography, you'll also need to override this back to 0.
body {
margin: 0;
}
div {
height: 60vh;
width: 100vw;
background: red;
}
<div></div>
For more in-depth information on CSS units, I'd recommend checking out this guide.
Hope this helps! :)
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
I have an image something like below.
<img src="file.jpg" />
Below is the css code
img {
max-width: 100%;
height: auto;
}
Can anyone explain me on how does this css code make the images responsive, I mean scale it perfectly. I want to know the working behind this css code.
When your parent width is smaller than width of image, image width will take 100% of parent width.
If parent width is bigger than image width, image width will stay original.
Same with max-height. Also min-width/min-height will ensure that width/height will not be smaller than specified.
height: auto; will preserve aspect ratio for image. If you set both max-height and max-width or set height to specific size than image will be stretched
When you apply max-width:100%; to any element then that perticular element could have maximum 100% width of its parent, thus it can give you gaurantee that child will never go out of parent's bounds.
Thus if parent has suffitient width then child is shown in it's original size, otherwise it's width is matched to the parent. Thus it make our layout responsive.
Here is example : http://jsfiddle.net/xxn2hfuL/
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/
i know what is absolute & relative position but some points are still not cleared to me.
for reference
css:
.rel{
position:relative;
background:red;
}
.abs{
position:absolute;
background:blue;
}
html:
<div class="rel">rel</div>
<div class="abs">abs</div>
now points are :
relative div takes 100% width automatically but absolute div only takes content width. why?
when i give height 100% there is no effect in the relative div but absolute div takes 100% height. why?
when i give margin-top:30px it's shift absolute div also but when i give top:30px then only relative div shift. why?
when i don't give top:0 , left:0 to the absolute div it's takes above div height. why?
Setting position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.
An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore, setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.
This is probably something to do with the parent elements in your HTML but I can't help further unless you provide the full HTML and CSS of your page.
The default value of the top and left properties is auto. This means the browser will calculate these settings for you and set them to where the element would be rendered if it didn't have position:absolute.