What does it mean when an element has a min-height but not a height?
div#single-post{
min-height:100px;
}
I just checked the site you gave and this is what I get
div#single-post
{
background-color: #FFFFFF;
padding-left: 20px;
padding-right: 20px;
}
There is no min-height for this id. Are you missing something?
Min-Height with no height would be the sidebar. Did you mean this???
If so, it is because it should still be there if there is no entry (otherwise, it would like dismiss and your site would look different), but it should also be able to expand if you are using a lot of modules or whatsoever
min-height sets a low-end threshold for the height of the element, but allows the content to control the height should the content exceed x px. Unlike the height property which doesn't allow the element to expand should content overfill the element set range.
min-width works in much the same way, except it does not allow content to dictate the width. Rather the minimum width is used to set limitations on how fluid page layouts resize when your browser window is adjusted. If you set min-width to 500px, the browser will not let your element shrink to less than 500px wide.
source: http://www.webmasterworld.com/forum83/5671.htm
So by using min-height in different areas of the site the user does not have to worry about content being missing or hidden by height restrictions as he/she can rest assured that the element will expand.
Related
Is it necessary to define the height: auto now days? and what the reasons is?
img {
max-width: 100%;
height: auto;
}
Thanks.
On an image without a height dimension explicitly set anywhere, it will actually default to height auto. So if you set max-width: 100%; the height will automatically be calculated by the browser to be the correct aspect ratio.
You may then think that it is not necessary to set the height to auto in the css but the real reason for it is if a height has been set on the img element with the height html attribute like this:
<img src="#" height="500" />
Although you may not set the height attribute explicitly yourself I know that wordpress for instance does set the height attribute on images that are pulled from the media library.
In this case if you only have set max-width to 100% the image will not be wider than the containing element but the aspect ratio will be wrong, the image most likely will be stretched taller. Use the css height auto to override the img tag height attribute.
That is why Bootstraps .img-responsive class sets height: auto;.
No, it's not.
MDN's docs on height states:
Initial value: auto
So, height property will be auto by default.
It makes sure the image is always displayed in the original aspect ratio. It's a common technique to realize responsive display of images. The important part is actually to always set only either width or height to soemthin other than auto. The browser will then resize the image, maintaining the aspect ratio.
max-width: 100%; in your code example makes sure the image is never displayed wider than its parent container.
In your code example, setting it is not necessary:
Most <img> have so-called intrinsic dimensions (such as JPG, PNG, GIF). In this case, stating neither width nor height explicitly makes the browser use those intrinsic dimension as a default for the given image. As soon as you specifiy exactly one of these, the other will be set to auto.
auto is the default value of the height CSS property. So, you don't need to define that value in the img element selector because you are not overriding it with a different value, you are just using the same default value.
It depends on what you want/are trying to do.
height:100%;
The element is going to have the 100% height of its parent container.
height:auto;
The element will have a flexible height. The height will adjust according to the height of the children elements within it.
On this page http://dev.morrisononline.com/index.php/ inside html and body there is a wrapper div containing the whole site and inside that is a page div containing everything. Both are 560px high but I need them to be 100%. I can change them to a different pixel value by adding height: 900px; to the CSS but without that I don't understand where those 560px come from. Why are they 560px and can I set them to be 100%?
I am using Chrome with developer tools and IE10 for testing.
I think you want what is commonly know as a "sticky footer". Check for instructions here http://ryanfait.com/sticky-footer/
I have set up a google map on my wordpress site here:
http://drummersdatabase.com/map/ (currently set to 500px height as a temp workaround)
I have managed to get the map to span 100% of the width but not the remaining height. I basically want to make sure there are no scrollbars regardless of the user's resolution.
When I set the map height and/or it's containing div css (class="gridfull") 100%; it seems to interpret this as 100px instead.
Any ideas how I can fix this?
Thanks,
Dave
WHen you're asking your map to be height 100% it doesn't know what to be height 100% of.
If you set your HTML and BODY tags to be height 100% that gives you a starting point.
Then if you only had the map on the page and told it to be height 100% then it would indeed fill 100% of the height of the page.
However you have a header and a footer which also take up space so in order to do what you want to do you'd have to set the header and the footer to be percentage based heights too.
Have a look at the fiddle to see what I'm talking about:
http://fiddle.jshell.net/Mm3TT/
The only other way I can think to do it would be using javascript to work out the height of the users browser then subtracting the height of the header and footer from that and setting the height of the map to be whatever is left.
I had a table in my application that could grow to ridiculous heights, so I added a wrapper div around it and set overflow-y: auto to get scrollbars. This unfortunately stopped the div from stretching it's width. Now it has scrollbars for both height and width. Setting overflow-x: visible doesn't even affect the result. I need the width to stretch since the content is of variable width.
Fiddle to illustrate the problem: http://jsfiddle.net/SG8T9/3
Thanks for any help
I'm not sure if this is what you mean but take a look here
http://www.brunildo.org/test/Overflowxy2.html
from that page:
According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ....
so overflow-x: visible becomes overflow-x: auto.
maybe you can make the container wide enough to hold the content, so it doesn't have to overflow.
You must not define a width for your div, otherwise it will not overflow that width regardless of the overflow-x setting. Instead use min-width and max-width to set expansion values, then overflow-x:visible; should work fine.
Here's a fiddle: http://jsfiddle.net/shanethehat/SG8T9/
Note that the defined max-width must be at least as large as the width of the content plus the width of the vertical scrollbar.
I have created a master page in asp.net which dont have any server side control as of now. I used div every where rather than table. There is not even a single Table right now in the page. Now When i tried to use that master page on other pages I found that div section that was holding the body content of the page is not expanding as the content is growing and content is overflowing on other sections.
Do we have any way to make div expandable with keeping minimum height fixed.
i.e. If the content is less than the minimum height set than regions should be shown with minimum height that was set else if content is more than minimum height then height starts growing with the page.
How can we do this.
This is my site where i want to make make about us and contact us page to be expandable.
You can find the css named style.css within the site.
By default a div will expand beyond the size specified using the min-height CSS property. My guess is that you are looking at the wrong thing as the cause of this issue. For your information IE6 I believe ignores the min-height property and will shrink to its content size even when the content size is smaller than the specified min-height.
UPDATE:
When you detect a browser with the problem mentioned above (i.e Internet Explorer 6) use JavaScript to measure the height of the wrapper DIV using it's offsetHeight and then subtract that value from what the min-height should be. If the value is positive then set the style.height value to the min height value.
Try this css:
div {
min-height: 100px;
overflow: hidden;
}
This overflow: hidden is a css-hack so to say. Maybe it helps you out here...