Исправлена проблема с положением при 100% ширине
У меня возникает следующая ошибка при использовании
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: 100%;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
}
проблема в том, что оранжевые панели выходят за пределы экрана. Как я могу это исправить? Не хочу использовать фиксированную ширину, так как она должна быть адаптивной.
Попробовал так, тогда он становится на весь экран.
Извините, извините, я понял вашу точку зрения .. вам нужно, чтобы заголовок был исправлен с той же шириной, что и родитель
попробовать position: sticky?
Можете дать ссылку на сайт для проверки? Я думаю, что проблема может быть вызвана каким-то margin или padding.
не работает. Я добавил слева: 0, справа: 0, ширина: 60% и поле: 0 авто. оно работает
@mohsinali1317 mohsinali1317, установив width на 60%, это не поможет вам в долгосрочной перспективе .. просто будет нормально работать на вашем тестовом экране, но не на всех экранах .. попробуйте найти другое решение
может быть, просто добавить максимальную ширину баннера?
Ответы 1
с width: inherit; в оранжевый блок мой пример работает
body {
background-color: #ccc;
}
.container {
position: relative;
width: 300px;
background-color: #fff;
overflow: hidden;
padding: 50px 15px;
}
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: inherit;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
padding: 15px;
}<div class = "container">
<h1>Osloskolen</h1>
<div class = "high-secuity">Your message</div>
</div>Это мое решение для codepen: codepen.io/salvatorerizzello/pen/YBEPzZ Я также добавил те же левые и правые отступы, что и контейнер;
Привет @ mohsinali1317, только что отредактировал мой ответ, чтобы вы могли проверить, работает ли код;)
установить
left : 0 ; right : 0без необходимостиmargin-leftилиwidth : 100%