What is the difference between height property and max-height property. It is understandable that if we set the max-height to 50px, the height of the element would not exceed 50px. But if we set only the height to 50px, then also the height would remain 50px. What is the difference ?
It is basically what you said. A div with a height of 50px will always be 50px tall.
A div with a max-height of 50px can be less than 50px tall, but when the content inside of it pushes it down, the div will become no larger than 50px in height.
Suppose you have a div block with id my_block. max_height puts a cap on the maximum allowable height that can be set:
#my_block{
width:20px;
height:60px; // You can try to set the height to 60px, but the max-height of 50px won't let you...
max-height:50px;
border:1px;
border-style:solid;
}
Setting the height to 50px is great but it doesn't make adaptable pages.
Instead setting the height to something like 100% means that it will show different heights on different devices with different screen sizes and will be more adaptable.
Setting a max-height setting the max-height to 50px will keep it adaptable but always under 50px.
For example setting the height to 480px would look fine on an iphone however it would look super small on a laptop. If you set the height to 100% though, it will fill the screen for both :D
Related
I have a div, and I am given 3 values for the width of the div. The normal width of the div is 120px, the min width of the div is 90px, and the max width of the div is 150px. I guess I am asked to apply these values based on the width of the screen. I would like to know how to write css for this?
I have tried below code, but it seems my div is always 120px.
.myDiv {
width: 120px;
max-width: 150px;
min-width: 90px;
}
Should I use media query?
Max-width and min-width as px will only have an impact if your width is used with percents %
(or other window based width like vw).
In your case I think indeed the best thing to do is use media queries.
Please, have a look at http://jsfiddle.net/g995s/.
<div id="textarea_wrapper">
<textarea>How and where my width is derived from?</textarea>
</div>
#textarea_wrapper{
height: 250px;
border:thick solid green;
}
textarea{
background-color: #930;
border:none;
margin:0;
width:auto;
resize:none;
overflow:hidden;
height:95%;
padding-top:5%;
}
It is impossible to me to explain two things: The first one is why textarea goes outside its parent since height+padding-top=100%?
The second one is how and from where this certain width of textarea is derived?
Thank you
In regards to the first issue, the percentage based padding-top value is relative to the width, not the height, therefore the positioning won't be consistent if the width of the browser is changed - try resizing the window to see this.
8 Box model - 8.4 Padding properties
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.
The padding-top percentage is based of the width of the parent element, not the height.
So it goes outside because 95% of the smaller height + 5% of the larger width = more than 100% of the height.
The width is the default width for the textarea because setting width: auto on textareas does nothing.
Set the textarea width and height to 100% and use a fixed measurement like px or em for the padding if you don't like how the top and bottom percentages work.
Then use box-sizing: border-box on the textarea to make its width, height and padding stay within 100% of its parent; http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Its the padding-top that is increasing the size of the text area
*edit: beaten to it! :)
I have been trying to make fluid boxes that will squeeze when you resize the window.
but this is whats happening:
When I resize the window the 4th box moves to the bottom and then the width of the boxes shrink. why is the 4th box moves under? what am I doing wrong?
Here's is whats happening:
http://www.dinkypage.com/169785
Here's the source:
http://pastebin.com/raw.php?i=4ZbbXxCq
Help Please
It's because you give the width: 25% to all 4 block, but also give 'padding: 10px' to them so obviously the width need to take more than 100%.
You need to either remove your padding or reduce the width of your block less than the total length of your padding, for example 22%
You need to use box-sizing: border-box. This is because the padding of 10px you have assigned to each of the floated div elements are added on top of the 25% width you have assigned, so the actual sum of the width of all four floated divs will exceed 100% (in fact, it will be 100% + (2*10px)*4 = 100% + 80px
The box-sizing: border-box property will ensure that the height and width you have set for the element will also include the paddings (if any) and/or border widths (if any).
In fact, I would suggest Paul Irish's recommendation using:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Since you also have your height explicitly declared, you might want to change the height of the containers to reflect the change in the box model. Since you have a padding-top of 30px and now it will be computed as part of the height of 240px, you should change the height to 240px + 30px (top padding) + 10px (bottom padding) = 280px.
I have these two images that are 50px by 50px. They're each locked in 50px-by-50px divs. I don't want them to shrink when a user uses full-page zooming to reduce the page size. Actually, I want the images to be zoomed, by default, to about 75px by 75px, and I want them to shrink to a minimum of 50px.
Can anyone tell me how to do this? Can I somehow stretch the images to take up 100% of the div and then just make the div 75px by default? Then, can I somehow set a minimum of 50px for the div? Can you please show me an example?
You could set min-width and min-height style properties on the div tag and set the img tag to span the full width and height of the div tag.
I am trying to lay out a web application and running into problems with divs stretching outside of body and html.
http://jsfiddle.net/dex3703/Pftpu/
The pink inner div extends outside of its container when set to 100% height. Why is this and how do I fix it?
#header has a height of 55px.
#topnav has a height of 65px.
#mainsection has a height of 90%.
#drawer has a height of 50px.
You're trying to assert that 55px + 65px + 90% + 50px = 100%, but you can't do that. It will be true for some height (where the height of your whole content is 1700px, see below), but not all heights:
55px + 65px + 90% + 50px = 100%
55px + 65px + 50px = 10%
170px = 10%
1700px = 100%
EDIT: You can achieve what you want by using relative/absolute positions appropriately. See the following jsFiddle: http://jsfiddle.net/Pftpu/12/
Note that this will still be greater than 100% because of the borders around the entirety of the page. You can wrap them in another div, but I wanted to show this example by only changing the CSS properties relevant to the main issue you were having.
You're mixing pixels and percentages, that'll never work.
#mainsection has 90%, leaving 10% for #header (65px), #topnav (55px) and #drawer (50px). At a window height of, say 700px, that leaves 70px - which is a whole lot less then 65+55+50=170px.
You'd need a height of exactly 10x170=1700px for your layout to work - or in other words: never mix pixels and percentages...