Проблема min-width в Firefox

217

25 января 2018, 17:57

Необходимо сделать так, чтобы содержимое тега HTML то бишь всего сайта, открывалось одинаково на всех разрешениях браузера, т.е. ширина сайта принимала ширину окна браузера.

В Chrome все отлично работает, достаточно задать min-width для тега HTML, но в Firefox и Safari это не работает, как быть?
Может я что-то упускаю?

<!DOCTYPE html> 
<html stlye="min-width:1400px;"> 
<head> 
	<title></title> 
</head> 
<body> 
 
	<div class="very-big-block" style="width:1300px;height:1300px;background: red;"></div> 
 
</body> 
</html>

Answer 1

Никогда не имей привычку трогать html и body. Ну даже body еще можно, но очень не желательно. То что ты хочешь сделать лучше делать через обертку. Создаешь div можешь назвать как угодно, но обычно это или root или wrapper

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
} 
 
.wrapper { 
  width: 100%; 
  height: 100%; 
  min-width: 1400px; 
  background: green; 
} 
 
.very-big-block { 
  width: 1300px; 
  height: 1300px; 
  background: red; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <title></title> 
</head> 
 
<body> 
  <div class="wrapper"> 
    <div class="very-big-block"></div> 
  </div> 
 
</body> 
 
</html>

Answer 2

Значение -moz-fit-content — задает ширину оптимальную для содержимого.

Для min-width это -moz-min-content, для max-width это -moz-max-content, а для width это большее значение между -moz-min-content и минимальным из -moz-max-content и -moz-available.

Пример:

div { min-width:-moz-fit-content; }