Как сделать ширину меню по ширине сайта?
Всем привет. Никак не могу понять как сделать верхнее меню шапки шириной равной желтой ширине сайта, но чтобы серый фон меню так и оставался во всю ширину экрана. Подскажите пожалуйста, всю голову уже сломал
header < display: flex; align-items: center;justify-content: space-around; height: 60px; background: #eee; >.main
LOGO Ссылка Ссылка Ссылка Ссылка Ссылка Войти Регистрация Отслеживать
задан 6 фев 2022 в 17:03
23 4 4 бронзовых знака
Так просто задайте максимальную ширину для шапки max-width: 70%;
6 фев 2022 в 17:11
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Нужна дополнительная обертка в header
header < background: #eee; >.menu < width: 70%; height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: space-around; >.main
Отслеживать
ответ дан 6 фев 2022 в 17:32
Евгений Лазорив Евгений Лазорив
Задать максимальную ширину html страницы
Страница на телефоне открывается красиво, а на компе — развёрнута на всю ширину и верхнее меню видно. Когда уменьшаю окно браузера до размеров телефона — вот так красиво, так и надо сделать при развёрнутом окне, чтоб всё посерединке и максимум 500рх шириной. Я замучался с этим max-width, не знаю уже куда его впихнуть, помогите. Страница вся в одном файле, без отдельных стилей и скриптов. Вот так хочу при развёрнутом окне чтоб было. 
Вот весь код страницы.
html < font-family: Helvetica, Arial, sans-serif; font-size: 16px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased >body < margin: 0; padding: 0 >.base-panel < margin: 0 22px 0 22px >.base-panel>*>label < display: inline-block; width: 3.0em; text-align: right >.base-panel>*>label.slist < width: auto; font-size: 0.9em; margin-left: 10px; text-align: left >input < -moz-appearance: none; -webkit-appearance: none; font-size: 0.9em; margin: 8px 0 auto >.lap < visibility: collapse >.lap:target < visibility: visible >.lap:target .overlap < opacity: 0.7; transition: 0.3s >.lap:target .modal_button < opacity: 1; transition: 0.3s >.overlap < top: 0; left: 0; width: 100%; height: 100%; position: fixed; opacity: 0; background: #000; z-index: 1000 >.modal_button < border-radius: 13px; background: #660033; color: #ffffcc; padding: 20px 30px; text-align: center; text-decoration: none; letter-spacing: 1px; font-weight: bold; display: inline-block; top: 40%; left: 40%; width: 20%; position: fixed; opacity: 0; z-index: 1001 >table < border-collapse: collapse; border-spacing: 0; border: 1px solid #ddd; color: #444; background-color: #fff; margin-bottom: 20px >table.info, table.info>tfoot, table.info>thead < width: 100%; border-color: #5C9DED >table.info>thead < background-color: #5C9DED >table.info>thead>tr>th < color: #fff >td, th < padding: 10px 22px >thead < background-color: #f3f3f3; border-bottom: 1px solid #ddd >thead>tr>th < font-weight: 400; text-align: left >tfoot < border-top: 1px solid #ddd >tbody, tbody>tr:nth-child(odd) < background-color: #fff >tbody>tr>td, tfoot>tr>td < font-weight: 300; font-size: .88em >tbody>tr:nth-child(even) < background-color: #f7f7f7 >table.info tbody>tr:nth-child(even) < background-color: #EFF5FD >.luxbar-fixed < width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) >.luxbar-burger span, .luxbar-burger span::before, .luxbar-burger span::after < display: block; height: 2px; width: 26px; transition: 0.6s ease >.luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span < background-color: transparent >.luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::before, .luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::after < margin-top: 0 >.luxbar-header < display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 58px >.luxbar-menu-right .luxbar-burger < margin-left: auto >.luxbar-brand < font-size: 1.6em; padding: 18px 24px 18px 24px >.luxbar-menu < min-height: 58px; transition: 0.6s ease; width: 100% >.luxbar-navigation < display: flex; flex-direction: column; list-style: none; padding-left: 0; margin: 0 >.luxbar-menu a, .luxbar-item a < text-decoration: none; color: inherit; cursor: pointer >.luxbar-item < height: 58px >.luxbar-item a < padding: 18px 24px 18px 24px; display: block >.luxbar-burger < padding: 18px 24px 18px 24px; position: relative; cursor: pointer >.luxbar-burger span::before, .luxbar-burger span::after < content: ''; position: absolute >.luxbar-burger span::before < margin-top: -8px >.luxbar-burger span::after < margin-top: 8px >.luxbar-checkbox < display: none >.luxbar-checkbox:not(:checked)~.luxbar-menu < overflow: hidden; height: 58px >.luxbar-checkbox:checked~.luxbar-menu < transition: height 0.6s ease; height: 100vh; overflow: auto >.dropdown < position: relative; height: auto; min-height: 58px >.dropdown:hover>ul < position: relative; display: block; min-width: 100% >.dropdown>a::after < position: absolute; content: ''; right: 10px; top: 25px; border-width: 5px 5px 0; border-color: transparent; border-style: solid >.dropdown>ul < display: block; overflow-x: hidden; list-style: none; padding: 0 >.dropdown>ul .luxbar-item < min-width: 100%; height: 29px; padding: 5px 10px 5px 40px >.dropdown>ul .luxbar-item a < min-height: 29px; line-height: 29px; padding: 0 >@media screen and (min-width:768px) < .luxbar-navigation < flex-flow: row; justify-content: flex-end; >.luxbar-burger < display: none; >.luxbar-checkbox:not(:checked)~.luxbar-menu < overflow: visible; >.luxbar-checkbox:checked~.luxbar-menu < height: 58px; >.luxbar-menu .luxbar-item < border-top: 0; >.luxbar-menu-right .luxbar-header < margin-right: auto; >.dropdown < height: 58px; >.dropdown:hover>ul < position: absolute; left: 0; top: 58px; padding: 0; >.dropdown>ul < display: none; >.dropdown>ul .luxbar-item < padding: 5px 10px; >.dropdown>ul .luxbar-item a < white-space: nowrap; >> .luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::before < transform: rotate(225deg) >.luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::after < transform: rotate(-225deg) >.luxbar-menu-material, .luxbar-menu-material .dropdown ul < background-color: #263238; color: #fff >.luxbar-menu-material .active, .luxbar-menu-material .luxbar-item:hover < background-color: #37474f >.luxbar-menu-material .luxbar-burger span, .luxbar-menu-material .luxbar-burger span::before, .luxbar-menu-material .luxbar-burger span::after
Проблема масштабирования адаптивной верстки на мобильных браузерах
Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…
Наверное, все кто занимался адаптивной версткой (да и не только адаптивной), знают, что при отображении сайта на мобильной версии браузера (скажем, на размере экрана в ширину 480 точек), сайт не отображается в масштабе 1:1, а «ужимается» под размер окна браузера. Т.е. браузер уменьшает сайт до такого размера, чтобы он целиком уместился в окно браузера. Элементы сайта становятся мелкими, шрифты не читабельными. И пользователю приходится увеличивать (масштабировать) его вручную. Но меня то не устраивает такая ситуация. Я то делал адаптивную верстку с надеждой, что она отобразится в браузере в своем реальном размере и сожмется не за счет масштабирования страницы под размер окна, а именно за счет резиновости блоков. Внешний блок () сайта имеет максимальную ширину 900 пикс, с возможностью сжиматься до 320. Блоки внутри так же сжимаются, перестраиваются и т.д. – это не важно, т.к. речь не об этом. Так вот при сжатии окна браузера на ПК, при размере окна меньше 900 пикс, сайт начинает успешно сжиматься за счет прописанных в css размерах в процентах, медиа-запросов и т.д… А при открытии его на мобильном устройстве он остается в своих реальных размерах и пропорциях, но просто масштабируется до такой степени, чтобы уместиться в окно браузера.
Еще раз повторюсь, что проблема не нова, и возможно многим верстальщикам знакома и может я зря так разжевываю, но все же на всякий случай постарался описать подробно.
И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport
который говорит браузеру, что сайт должен отображаться как есть, не масштабироваться автоматически при первоначальной загрузке (потом пальцами, конечно, можно масштабировать, если не запретить это в том же мета-теге). И если, например, это не адаптивный сайт и ширина его больше ширины окна браузера, то он, конечно же, не уместится целиком, пользователю нужно будет либо уменьшать (масштабировать вручную) либо прокручивать. А если это адаптивный сайт, то он, как и было задумано верстальщиком, сожмется за счет резиновости блоков до ширины окна. Что в итоге и произошло с моим сайтом.
Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 1280 пикс.
Что же в итоге получилось. Сайт, максимальная ширина которого, напомню 900 пикс, отобразился в своем нормальной размере в 100% масштабе. Но размер экрана устройства 1280 пикс! И что в итоге получлось? А получилось, что сайт не занял всю ширину экрана, а занял свои законные 900 пикс. В итоге по краям остались поля примерно по 154 пикс ((1280-900)/2). Кто-то скажет, что это ж нормально. Ведь когда мы открываем сайт на ПК, с шириной экрана, скажем, те же 1280 точек, то естественно сайт не будет занимать всю ширину, а будет занимать положенные ему 900 пикс, которые заданы в CSS как максимальная ширина сайта (или фиксированная ширина, если это фиксированный макет).
Но на планшете то эта ситуация не кажется нормальной. Т.к. экран сам по себе все-таки маленький, по сравнению с десктопами, хоть разрешение у него и 1280 точек. Хотелось бы, чтобы сайт занимал максимум пространства этого экрана. На компе нам этого не нужно, т.к. 900 пикс на мониторе будут выглядеть нормально, благо размер пиксела у него побольше чем у планшета. А вот на планшете когда страница не занимает весь экран – это кажется дикостью (по крайней мере мне). И все дело в том самом мета-теге viewport, которым мы задали отображение сайта в реальном масштабе. Это помогало нам, когда размер сайта был меньше 900 точек, т.е. помогало нам не масштабировать его под размер экрана, а отображать в реальном размере. Но это мешает нам при размере экрана больше 900 точек, ведь тут как раз хочется, чтобы масштабирование сработало, чтобы сайт увеличился до размеров окна, т.е. по максимум использовал всю ширину экрана, ведь это ж все-таки мобильное устройство.
Я для сравнения загрузил старую версию этого сайта (дизайн полностью такой же, за тем исключением, что не адаптивный, а фиксированной ширины 900 пикс) и он при первоначальной загрузке занял всю ширину экрана. Ведь в нем я не использовал viewport.
В заключение хочу сказать, что тестировал пока только на самсунге. Боюсь предположить, что же будет на iPad, разрешение которого по широкой стороне в два раза больше самсунга, 2048 пикс. Неужели страница будет занимать меньше половины экрана (она ж 900 точек)?
Короче говоря, хотелось бы поинтересоваться у сообщества, сталкивался ли кто-нибудь с подобными проблемами. И можно ли это считать проблемой? Или это нормальное поведение, которое не нужно никак исправлять? Т.е. отобразился сайт в реальном масштабе. Если не занял весь экран, то клиент без проблем увеличит его уже пальцами, смасштабирует как надо?
Пытался найти способ как сделать так, чтобы при размере экрана меньше 900 пикс, viewport срабатывал бы, а при размере больше 900 пикс не срабатывал. Не нашел.
P.S. прошу прощения что не разместил этот текст в q&a, упустил этот момент, а теперь уже не могу поменять.
- Вопрос задан более трёх лет назад
- 143006 просмотров
1 комментарий
Средний 1 комментарий
Ширина (width) и высота (height) в HTML
В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):
Получится такой результат:
Можно задавать ширину не только в пикселях, но и в процентах от ширины родительского элемента. Попробуем сделать это:
Получится такой результат:
К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.
Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after)
Максимальная и минимальная ширина (max-width и min-width)
Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.
Результат будет аналогичен предыдущему примеру:
Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:
По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.
Максимальная и минимальная высота (max-height и min-height)
Для блока div можно задать максимальную высоту. Это делается в том случае, если контента в блоке будет слишком много и есть вероятность, что он испортит вёрстку сайта. Ведь у контейнера div высота изменяется автоматически в зависимости от того, сколько занимает места его дочерние элементы.
Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха. Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.
По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.