#html #css #navigation #width
#HTML #css #навигация #ширина
Вопрос:
У меня проблема с моим HTML / CSS-кодом, который сводит меня с ума. Я уверен, что это что-то действительно глупое, но, похоже, я не могу найти основную причину такого поведения.
Для наглядности я работаю над этим сайтом http://www.kasiapukeca.com и когда вы посещаете сайт, все выглядит нормально. Теперь увеличьте масштаб более чем на 100%, скажем, на 125-150% . Моя проблема в том, что область холста верхней панели навигации не заполняется автоматически справа, когда содержимое навигации растягивается. Есть идеи?
Я пробовал width: 100% и width: auto, и, похоже, это все еще не помогает. Странно то, что когда я вручную указываю размер ширины, например width: 3000px, тогда фон растягивается. 
Ответ №1:
Я вижу div непосредственно перед kp-stack1, у которого нет идентификатора класса. Этот div — это то, что мешает этой панели навигации растягиваться вместе с ним.
Вы должны присвоить этому div идентификатор контейнера и изменить его ширину, чтобы получить желаемые результаты.
Редактировать: На самом деле, я только что взглянул еще раз. Ширина HTML-файла достигает всего 900 пикселей. Вы бы хотели, чтобы HTML покрывал всю страницу, чтобы тело также могло идти дальше по горизонтали. Если вы измените размер основного текста на 1500 пикселей, вы увидите, что панель навигации будет растягиваться настолько, насколько это необходимо.
По какой-то причине я не могу развернуть HTML на весь экран, возможно, кто-то умнее меня сможет разобраться.
Комментарии:
1. Да, есть контейнер div, который я не назвал. Я не думал связываться с этим, но, возможно, мне стоит попробовать на этом этапе.
2. Ну, самая большая проблема заключается в том, что HTML не расширяется по горизонтали. Как только HTML будет скорректирован, все остальное последует его примеру. Этот div отсекается телом, которое отсекается самим элементом HTML. Попробуйте то, что предложил webkit, я не мог понять, как это изменить сам : (
Ответ №2:
Ваше «ТЕЛО» отключается, потому что в целом ваша страница не реагирует.. это означает, что если у вас есть элементы, фиксированная ширина которых будет больше ширины окна просмотра, вы получите горизонтальную полосу прокрутки, которая вам не нужна, потому что тогда ваше ТЕЛО будет вырезано .. мой совет — добавьте их в свой css в качестве отправной точки.. затем настройте, чтобы получить желаемый конечный результат:
CSS
html, body { width:100%;}
#kp-stack1 { background-size:contain;}
.stackWrapper { width:100%;}
#kp-card { width:50%; min-width:304px; max-width:320px; box-sizing:border-box;}
#kp-pricehome { width:45%; box-sizing:border-box;}
Обратите внимание, что при увеличении ваша навигация будет сокращена.. вам нужно подумать, как вы хотите подойти к этому, либо уменьшить размер шрифта, чтобы сохранить полосу внутри окна просмотра .. или какое-либо другое решение..
Комментарии:
1. Спасибо @webkit, я попробую. Я также рассматривал подход к уменьшению размера шрифта.
2. есть какие-нибудь советы по динамической проверке, когда / если фиксированная ширина больше, чем окно просмотра?
3. Почему вы хотите это проверить? если вы хотите оставить фиксированную ширину для своих макетов, вы могли бы использовать медиа-запросы css в качестве контрольных точек для изменения правил стиля в соответствии с разрешением (размером) экрана.. допустим, если ширина вашего макета равна 1024px, то вы могли бы использовать медиа-запрос с «максимальной шириной 1024px», чтобы установить правила для того, когда экран меньше этого.