Geek Answers Handbook

How to get minimum height working in Safari, Chrome on MAC

I have a page with the following CSS, it displays IE and FF perfectly, but on Mac in Safari and Chrome the minimum height doesn’t work, and all the content collapses when the browser page is short, rather than continuing and providing scrollbars:

<style type="text/css"> html, body { height: 100%; width: 100%; } body { height: 100%; width: 100%; background: #000000; font: 86% Arial, "Helvetica Neue", sans-serif; margin: 0; padding: 0px; color: #CCCCCC; } #website_wrapper { min-height: 850px; min-width: 1080px; height: 100%; width: 100%; } #website { height: 100%; width: 100%; background-color: #000000; vertical-align: bottom; }

Any ideas why Safari (WebKit, I think) doesn't do what it is told? Thanks in advance...

+4
source share
3 answers

For some reason, I encounter a similar problem when my Safari navigation bar is different from other browsers.

To fix this, I used min-height: initial

I also wrapped this in a special media query to avoid potential conflicts:

is there a css hack for safari just NOT chrome?

+3
source

The following example works for me on Mac OS X 10.6.4 using Safari 5.0.1 (not sure which version of Webkit is):

 <html> <head> <!-- <style> .box1 { float: left; width: 100px; margin: 1em 20px 1em 0; background: yellow; border: 1px solid black; min-height: 100px; } --> </style> </head> <body> <div class="box1"></div> <div class="box1">less text</div> <div class="box1">more text more text more text more text more text more text</div> </body> </html>

I cannot say from your example how you implement your styles, since you only show your style definitions. Another thing I noticed is that you define identifier styles (# notation) instead of class styles (dot notation). Although this also works, it is recommended that you define class styles when you want to apply style to multiple elements.

If this example does not help you, perhaps you can embed HTML code that shows HOW you use your styles.

+1
source

It is assumed that min-height will be supported in Safari, but you can try to emphasize hack :

min-height: 850px; height: car; _height: 850px;

0
source

More articles:


All Articles