0

Хочу сделать чтобы border-bottom был на всю ширину экрана, а контент был только в заданной ширине.

На картинке изобразил наглядно (желтые линии это border-bottom, красные - ширина блока с контентом)

введите сюда описание изображения

Мой код:

body {
	width: 100%;
	margin: 0 auto;
	background: #ffffff;
	font-size: 16px;
}

.case {
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

header {
	border-bottom: 1px solid #000000;
	height: 50px;
	display: flex;
	align-items: center;
}
<div class="case">
		<header>
			<div class="logo">
				Logo
			</div>
		</header>
</div>

1 ответ 1

4

Поместите секции в контейнер, у секции ширина сколько вам нужно, у контейнера 100%

body, html {
  margin: 0;

}

.container {
  border-bottom: 1px solid #333;
}

section {
  width: 500px;
  margin: auto;
  height: 250px;
  background: #ddd;
}
<div class='container'>
  <section></section>
</div>
<div class='container'>
  <section></section>
</div>
<div class='container'>
  <section></section>
</div>

2
  • в таком случае приходиться каждую секцию заворачивать в контейнер. (<container><header></header></container>) (<container><footer></footer></container>) , нет ли более универсального решения?
    – iKey
    7 авг 2019 в 7:22
  • 1
    @iKey это самый очевидный и простой вариант, остальное уже кажется костылями
    – ThisMan
    7 авг 2019 в 7:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.