Блог

Главная - Вопросы по программированию - Элемент не переносится должным образом, отображается при изменении размера окна просмотра и прокручивается вправо

Элемент не переносится должным образом, отображается при изменении размера окна просмотра и прокручивается вправо

#html #css #scroll #viewport

#HTML #css — файл #прокрутка #окно просмотра #css

Вопрос:

Поиграв с самой базовой настройкой HTML, я обнаружил, что перенос верхнего <html> тега не функционирует должным образом в КАЖДОМ браузере.

У меня есть <html> элемент с желтым цветом фона. Затем <body> элемент шириной 1000 пикселей, высотой 100 пикселей и красным цветом фона.

При просмотре страницы и изменении размера окна просмотра (чтобы стала видна горизонтальная полоса прокрутки) полностью прокрутите вправо и проверьте показатели в вашем любимом инструменте веб-разработчика.

Тег body отображается правильно с шириной 1000 пикселей, но затем наведите курсор на HTML-элемент, который будет обрезан в точности до размера разрешения окна просмотра. Другими словами, <html> элемент не переносится должным образом. Несмотря на то, что цвет фона <html> тега отображается правильно по всей странице?

Вы могли бы подумать. Почему это важно, цвет отображается правильно, поэтому. Зачем беспокоиться?

Проблема становится ясной и на этом самом сайте! Прокрутите вниз до нижней части этой страницы, измените размер окна вашего браузера, а затем прокрутите вправо. Посмотрите, что происходит с фоном нижнего колонтитула img .

При работе с фоновыми изображениями / цветом это действительно раздражает.

Я нашел в Интернете решение для устранения этой проблемы, но оно не элегантное.

 /* Wrap Fix! */
/*set min-width for ie*/
min-width: 1000px; 
/*force horizontal scroll for widths <1000*/ 
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );

Мои вопросы:

Является ли это правильным поведением браузеров? Как это можно решить по-другому?

Для получения дополнительной информации, обсуждения и демонстрации проверьте этот форум

 <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Weird html wrap..</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    html {
      background-color: yellow;
    }
    
    body {
      background-color: red;
      height: 100px;
      width: 1000px;
    }
  </style>
</head>

<body>
</body>

</html>

Ответ №1:

То же самое можно сказать и о любом блочном элементе, которым является HTML-элемент. Если какой-либо из его дочерних элементов шире, чем он, то они «просачиваются» за его пределы (см.: http://jsbin.com/edoza5 ). Вы предполагаете, что HTML является особенным, когда это просто еще один элемент блока.

Это правда, что существуют несоответствия между тем, как браузеры обрабатывают настройку ширины элемента body, что является одной из причин, по которой содержащая оболочка является общим местом. Это, и полезно иметь два 100% «корневых» элемента для игры.