Цвет фона за пределами заголовка
Цвет фона моего заголовка выходит за пределы страницы. Мне интересно, как настроить его ширину, чтобы он автоматически заполнял любой размер экрана без переполнения. Я предполагаю, что это как-то связано с моим свойством ширины в «белом» классе или потому, что оно находится внутри контейнера. В основном это вызывает горизонтальную прокрутку из-за расширения цвета фона, вместо того, чтобы просто останавливаться на 100% ширине страницы. Я ценю любую помощь, которую я получаю в этом, большое спасибо.
.white {
background-color: #fff;
position: relative;
}
.white:before {
content: "";
background-color: #fff;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
} <div class = "container">
<nav class = "navbar navbar-light navbar-expand-lg white row">
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarTogglerDemo01" aria-controls = "navbarTogglerDemo01"
aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarTogglerDemo01">
<!-- Logo -->
<div class = "logo">
<a href = "#" class = "navbar-brand">
<img src = "{% static 'accounts/logo/logo.png' %}" height = "40" width = "40">
</a>
</div>
<!-- Search Box -->
<div class = "search_wrapper">
<input type = "text" placeholder = "Search" class = "search_input">
<button class = "search_button">🔍</button>
</div>
<!-- Nav List -->
<ul class = "navbar-nav ml-auto">
<span class = "middle">
<li class = "nav-item">
<a href = "#" class = "nav-link">
<img src = "{% static 'accounts/blah/blah.png' %}" height = "20" width = "20" id = "home"> Random
</a>
</li>
<li class = "nav-item">
<a href = "#" class = "nav-link">
<img src = "{% static 'accounts/blah/blah.png' %}" height = "20" width = "20" id = "lessons"> Random
</a>
</li>
<li class = "nav-item">
<a href = "#" class = "nav-link">
<img src = "{% static 'accounts/blah/blah.png' %}" height = "30" width = "30" id = "teacher"> Random
</a>
</li>
<li class = "nav-item">
<a href = "#" class = "nav-link">
<img src = "{% static 'accounts/icons/blue.png' %}" height = "20" width = "30" id = "msg"> Random
</a>
</li>
</span>
<!-- Avatar Dropdown -->
<span class = "right">
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdown" role = "button" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
<img src = "{% static 'accounts/blah/blah.png' %}" height = "30" width = "25"> Blah
</a>
<div class = "dropdown-menu" aria-labelledby = "navbarDropdown">
<a class = "dropdown-item" href = "#">Random</a>
<a class = "dropdown-item" href = "#">Random</a>
<a class = "dropdown-item" href = "#">Random</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#">Random</a>
</div>
</li>
</span>
</ul>
</div>
</nav>
Ответы 2
Это ванильный CSS без начальной загрузки, поскольку это то, что я использую. Я не могу гарантировать, что это работает с начальной загрузкой.
Вы пытаетесь использовать
width: 200vw;
поскольку 1vw относится к 1% ширины области просмотра, вы даете своему контенту ширину, в 2 раза превышающую ширину окна просмотра.
width: 100vw;
margin: 0;
padding: 0;
должен занимать всю ширину экрана. Вам просто нужно убедиться, что нет никаких отступов или полей ни на левой, ни на узкой стороне.
Вот небольшая закуска для юнитов. https://www.w3schools.com/cssref/css_units.asp
Вы также можете попробовать отрицательную маржу:
.white {
background-color: #343434;
position: relative;
width:100vw;
margin: -10px;
}
должно хорошо работать для вас кодовое слово: https://codepen.io/ironlors/pen/bjYOpQ
вы проверяли наличие полей или отступов справа / слева?
Контейнер, в котором он находится, имеет отступы и поля, но мне нужен заголовок внутри контейнера, так как он лучше всего согласован с остальным содержимым, подобным этому.
добавили идею об отрицательной марже в ответ
Не исправил. Слегка сдвинул заголовок влево и вверх.
Мне очень жаль, похоже, я не понимаю проблемы. Вы хотите избавиться от пробелов до и после заголовка, верно? И эта горизонтальная прокрутка должна исчезнуть. Я просто не могу понять вопрос. Поскольку width:100vw; в сочетании с удалением отступов / полей должен решить эту проблему. Может быть, скриншот или код всей веб-страницы тоже мне подойдут.
По сути, я хочу, чтобы весь текст на моей странице, будь то навигационная или основная, был выровнен друг с другом (поэтому мне нужны поля и отступы), а затем просто цвет фона заголовка для расширения на всю ширину за пределы контейнеров. .
хорошо, тогда я бы снова просто использовал ´margin-left: -8px; ´ и padding-left:8px; в заголовке. Это расширяет фон на 8 пикселей влево (поле <body> по умолчанию), сохраняя при этом контент на том же месте.
Используйте <div class = "container-fluid"> вместо <div class = "container">
Я не хочу, чтобы моя страница полностью расширялась в зависимости от размера экрана, это может вызвать проблемы для экранов 4k или больших размеров. Кроме того, я не хочу, чтобы сайт выглядел эстетично. Я хочу, чтобы весь контент был таким, какой он есть, но только цвет фона навигационной панели расширялся до полного размера.
В этом случае добавьте контейнер внутри тегов nav.
Это закроет контейнер, когда закончится навигация. Я хочу, чтобы контейнер продолжал структуру с содержимым моего тела за пределами <nav>.
Используйте другой контейнер для остальной части страницы. Поскольку к ним применяются одни и те же правила css, размер будет соответствовать размеру контейнера nav.
Разве это не приведет к тому, что текст, который у меня есть в моем навигаторе, не будет выровнен с основным содержимым, поскольку это будет жидкость контейнера. По сути, я хочу, чтобы весь текст на моей странице, будь то навигационная или основная, был выровнен друг с другом, а затем просто цвет фона заголовка расширялся на всю ширину за пределы контейнеров.
Не работает. Цвет фона больше не переполняется; однако он останавливается, не достигнув 100% ширины страницы.