Hello boys and girls!

First, a small introduction:

<!doctype html> <html> <head> <style> body, div { padding:1%; } body { background-color:red; } div.div1 { height:50%; min-height:200px; background-color:green; width:100%; position:absolute; } div.div2 { float:left; height:50%; background-color:red; } div.div3 { float:left; height:40%; background-color:grey; } img.img1 { float:left; height:96%; background-color:black; width:100px } img.img2 { float:left; height:50%; width:100px; background-color:black; } </style> </head> <body style="background-color:red;"> <div class="div1"> <div class="div2"> <img src="" class="img1" /> </div> <img src="" class="img2" /> <div class="div3"></div> </div> </body> </html>

You can see here

In short: there is a main div, from which the other values ​​in percent should be calculated. At the same time, this height div must not be less than a certain value. Wrote, did, check:

  1. Mozila - everything works
  2. Opera - values ​​are calculated correctly, but for some reason the screen is redrawn only if the page is updated. When you change the width of the window, it does almost what you need (by updating the screen we see that it was still a little something wrong), but somehow it jumps (you lead - it is sharply more than necessary and immediately the norm). When you change the height of the window - it behaves somehow unpredictable: it does not increase, decreases sharply and irregularly (that is, it does not decrease until a certain moment, then a sharp decrease).
  3. IE 9 - everything works
  4. IE 8, Safari - problems appear - divs behave as they should, but img behaves strangely - as far as I understand, the values ​​are calculated not from the main div, but from the body, i.e. div'y one day cease to decrease, but img continues to successfully do this ...

Decision (?):

At the main div'a set position: static. Other problems appear:

IE8, Opera, Safari, Mozilla - the calculation is carried out from the body, i.e. if its height is less than the min-height of the main div, then, respectively, the remaining elements will have far from the height that is needed. In a real project, the contents of the main div are fully specified in percent, i.e. all elements retain their position relative to each other, thus the appearance is kept as it should ... Well, or almost ... the min-height of the main div is not taken into account, and this is not what is required ...

What could be the reasons for such a strange behavior of Safari in the first case and why is the min-height ignored in the second? And how it is ignored - only if it is necessary to calculate the height values ​​of the internal elements, the div itself maintains its height equal to the min-height.

  • one
    Writing a style for every non-CSS element is a bad habit. It is more difficult to perceive the structure of tags. And better just bring the link to jsfiddle.net. Many just do not want to drive it all themselves, it is much easier to try to change something in an already working implementation. - komka
  • About CSS - made for example, so I decided not to make in style. But about the advice - thanks, I will consider. - BOPOH

1 answer 1

Checked the code in Firefox, IE9 & 8, Opera. The problem is reproduced only in the opera and that, only, probably, because of the peculiarities of the redrawing algorithm of the page in the window. Safari no, I can not check. The error here is not an error at all. In my opinion, everything works everywhere. Checking the behavior of the site when changing the browser window is already perfectionism. With this problem, there is nowhere except opera. But even there the problem is, only if you change the height of the window. If you change the size of the window for the lower right corner, then the redrawing is normal.

Added. Safari set myself. I tried there and understood your problem. As part of your question, I found a solution. But, if you end up with other basic data or if the conditions appear, my solution will not work. Specify the width of the div in the div, and img inside it to make position: absolute.

 div.div2 { float:left; height:50%; background-color:red; width:100px; } img.img1 { background-color:black; width:100px; height:43%; position:absolute; }

Please note that the float in img is not needed. Maybe there was another thought?

The second option.

 div.div2 { float:left; height:50%; background-color:red; } img.img1 { background-color:black; width:100px; height:96%; min-height:96px; }

Here we make the assumption that the div1 block will always be 200px. Therefore, we can make a limit of 96px (picked up) so that img1 does not decrease below this value. After all, the div2 block also depends on div1, which means that 50% of 200px will be 100px (well, plus minutes there for all kinds of boarders and paddings).

I cite only a second example: cssdesk.com .

  • About IE8, I have sinned a little: the divs are considered normal there, but that's only from the body, but it is required from the first div, so this is also a cant, because he (the first div keeps his min-height) ... Personally, I’m interested in what to do for a safari? The error is most likely there (maybe not in the safari itself, but in how it should be implemented for it, and that is exactly what I wanted to know). And about the check - the requirements are not mine, I just implement them ... - BOPOH
  • Updated the answer - komka
  • So I also implemented, but what you said just here appears: the project uses different styles for portrait and landscape orientation. For a portrait div for the first div, for example, min-height: 480px, for a landscape div — min-height: 320px, and this is not even set by styles, but jQuery.mobile - it interrupts all styles. Under these conditions (and for a given min-height, the image for each orientation) has a different glitch - in jQuery - it incorrectly calculates the page orientation! Or rather, for example, with width: 333 height: 332 - he says that this is a portrait orientation !!! - BOPOH
  • I understand that the problem is this: $ .event.special.orientationchange.orientation = get_orientation = function () {var elem = document.documentElement; return elem && elem.clientWidth / elem.clientHeight <1.1? "portrait": "landscape"; };) And everything would be fine, but in this situation a change in orientation in CSS and jQuery occurs non-simultaneously, and therefore that bug appears again when the picture is smaller than what was intended, and unnecessary empty space appears ... - BOPOH
  • Well, as I understand it, you tried my second version, where the dimensions are clearly defined in pixels. And what happens when the size is set in% as in my first example? - komka