All geek questions in one place

Indicated minimum height and 100% height together

I'm baiting the network trying to find the answer to my nightmarish css question.

The main problem is getting the minimum height: 580 pixels and height: 100% at the same time in all browsers.

I need to achieve:

  • The site must have a minimum height of 580 pixels, including the footer, so the total height before the scroll bars appear is 580 pixels.
  • In addition, a minimum width of 930px is required, including 15px left and right margins on each side.
  • left menu with a width of 216 pixels and a height of 100% minus the height of the footer 30 pixels.
  • The main part of the screen should fill the entire space. If the screen height is not less than 580 pixels or the width is less than 930 pixels. In this case, you get scroll bars.
  • Compatibility: 6,7,8, Firefox and Safari.

Can this be done without Javascript?

+3
source share
2 answers

There may be cleaner methods, but the idea that comes to mind about the minimum height (the minimum height is not interpreted by IE <8 in any case):

Place the absolutely positioned invisible DIV 1 pixel wide in the left corner of the screen. Give it a height of 580 pixels. This should make a height of at least 580 pixels.

The same should be possible with horizontal width.

Then you can work with part of the menu in the usual way.

Remember that your HTML element needs height: 100% for height: 100% for working inside the body.

+1
source

-, IE6 IE7 javascript, period. - .

, ( , , ), , , , : 100% min-height, , .

div , 100% div, 580px...

+1

Source: https://habr.com/ru/post/1723410/

More articles:


All Articles