Как прикрепить начало одного блока и конец другого к диву?

Question

Как прикрепить начало одного блока и конец другого к диву?

Рейтинг: 0Ответов: 4Опубликовано: 12.04.2023

Есть такой примерный рисунок:

Нужно сделать так, чтобы конец блока black и начало блока white прикрепились к началу блока main. То есть, блок black и white делят страницу на 2 части. Можно сказать, что в одной части находится aside, в другой main.

container - имеет максимальную ширину в 1000px и минимальную в 768px
aside - имеет фиксированную ширину в 250px
main - занимает всю оставшуюся область
black и white - имеют высоту на всю страницу

.wrapper {
  padding-top: 30px;
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1000px;
  min-width: 728px;
}

.content {
  height: 300px;
  font-size: 24px;
  text-align: center;
  display: flex;
  border: 5px solid #30ff00;
}

.sideBar {
  width: 250px;
  height: 200px;
  margin-right: 10px;
  border: 5px solid #ff0000;
  color: #ff0000
}

.view {
  flex-grow: 1;
  border: 5px solid #0006ff;
  color: #0006ff
}

.content__bg--black {
  background-color: #000;
}

.content__bg--white {
  background-color: #fff;
}

<div class="wrapper">
    <div class="container">
        <div class="content">
            <div class="content__col sideBar">Sidebar</div>
            <div class="content__bg content__bg--black"></div>
            <div class="content__bg content__bg--white"></div>
            <div class="content__col view">Main</div>
        </div>
    </div>
</div>

Используя position relative пытался задать положение content__bg--black и content__bg--white, но в итоге ни к чему не пришел

css html scss

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Сделал при помощи прикрепления ":before" к ".container" поскольку "container" имеется во всех секциях, а следовательно будет и от шапки идти, и от подвала тоже.
Также сделал смещение ":before" на 275px, это как вы сказали неизменяемый в десктопе размер "sideBar" + разные отступы. А "top: -100px" и "height + 100px" сделал для того, что бы чёрный цвет закрывал промежуток между например шапкой и контентом. Там если у вас расстояние больше, можете больше сделать top и height на нужную вам величину.
Правую сторону делать белой нет смысла, так как она изначально белая.

.wrapper {
  padding-top: 30px;
}
div {
  box-sizing: border-box;
}
header {
  font-size: 24px;
  background: lightblue;
}
.container {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1000px;
  min-width: 728px;
  min-height: 50px;
  position: relative;
  border: 5px solid #30ff00;
}
.container:before {
  content: "";
  display: block;
  width: 10000px;
  height: calc(100% + 100px);
  position: absolute;
  top: -100px;
  right: calc(100% - 275px);
  background: black;
  z-index: -1;
}
.content {
  height: 300px;
  font-size: 24px;
  text-align: center;
  display: flex;
}

.sideBar {
  width: 250px;
  height: 200px;
  margin-right: 10px;
  border: 5px solid #ff0000;
  color: #ff0000
}

.view {
  flex-grow: 1;
  border: 5px solid #0006ff;
  color: #0006ff
}

.content__bg--black {
  background-color: #000;
}

.content__bg--white {
  background-color: #fff;
}

<header class="header">
  <div class="container">Header</div>
</header>
<div class="wrapper">
    <div class="container">
        <div class="content">
            <div class="content__col sideBar">Sidebar</div>
            <div class="content__col view">Main</div>
        </div>
    </div>
</div>

Answer 2

▲ 3

Как вариант sidebar-у псевдоэлемент подложить.

*{
  margin: 0;
  pading: 0;
}
.wrapper {
  padding-top: 30px;  
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1000px;
  min-width: 728px;
}

.content {
  height: 300px;
  font-size: 24px;
  text-align: center;
  display: flex;
  border: 5px solid #30ff00;
}

.sideBar {
  width: 250px;
  height: 200px;
  margin-right: 10px;
  border: 5px solid #ff0000;
  color: #ff0000;
  position: relative;
}

.sideBar::before{
  content: '';
  position: absolute;
  right: -15px;
  top: -40px;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: -1; 
}

.view {
  flex-grow: 1;
  border: 5px solid #0006ff;
  color: #0006ff
}

<div class="wrapper">
    <div class="container">
        <div class="content">
            <div class="content__col sideBar">Sidebar</div>
            <div class="content__col view">Main</div>
        </div>
    </div>
</div>

Answer 3

▲ 2

Выход фона за пределы (возможно стили можно оптимизировать, формулы и и т.п.):

body{
  background: linear-gradient(90deg,
      black 0%,
      black calc(100vw - 100vw + 300px),
      yellow calc(100vw - 100vw + 300px),
      yellow 100%
    ); 
}

@media only screen and (min-width: 1000px) {
  body{
    background: linear-gradient(90deg,
        black 0%,
        black calc(100vw/2 - 1000px/2 + 280px),
        red calc(100vw/2 - 1000px/2 + 280px),
        red 100%
      ); 
  }
}

.wrapper {
  padding-top: 30px;
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1000px;
  min-width: 728px;
}

.content {
  height: 300px;
  font-size: 24px;
  text-align: center;
  display: flex;
  border: 5px solid #30ff00;
}

.sideBar {
  width: 250px;
  height: 200px;
  margin-right: 10px;
  border: 5px solid #ff0000;
  color: #ff0000
}

.view {
  flex-grow: 1;
  border: 5px solid #0006ff;
  color: #0006ff
}

<div class="wrapper">
    <div class="container">
        <div class="content">
            <div class="content__col sideBar">Sidebar</div>
            <div class="content__col view">Main</div>
        </div>
    </div>
</div>

Решение без media-query на градиенте с 1 формулой:

(формула еще нуждается в доведении)

body{
  color: black;
  --half_vw: calc(100vw / 2); 
  --side_w: 250px;
  --lmar: 15px;
  --gap: 10px;
  --added_space: calc(100vw - 1000px);  
  --diff_part: calc(var(--half_vw)- (var(--side_w) + var(--lmar) + var(--gap)));
  --lmargin_table: max(var(--added_space)/2, var(--lmar) * 2); 
  --black_w: calc(var(--half_vw) - var(--diff_part) + var(--lmargin_table)
  );
  background: linear-gradient(90deg,
      black 0%,
      black var(--black_w),
      yellow var(--black_w),
      yellow 100%
    ); 
}

Answer 4

▲ 0

На всю страницу разверни. Смысл должен быть понятен, что к чему. С размерами уже сам поиграешься.

body {
  width: 100%;
  min-height: 100vh;
 }
 .wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 100%;
}

.container {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  z-index: 2;
  width: 50%;
  height: 450px;
  background: transparent;
  left: 300px;
  top: 20px;
  border: 5px solid #30ff00;
}


.sideBar {
  width: 200px;
  height: 300px;
  border: 5px solid #ff0000;
  color: #ff0000
}

.view {
  position: relative;
  width: 65%;
  border: 5px solid #0006ff;
  color: #0006ff
}

.content__bg--black {
  z-index: 1;
  position: absolute;
  left: 0;
  background: #000;
  width: 40%;
  height: 100%;
}

.content__bg--white {
  z-index: 1;
  position: absolute;
  right: 0;
  background: #fff;
  width: 60%;
  height: 100%;
}

  

 <body>
    <div class="wrapper">
       <div class="content__bg--black"></div>
       <div class="content__bg--white"></div>
       <div class="container">
          <div class="sideBar">Sidebar</div>
          <div class="view">Main</div>
       </div>
    </div>
   </body>

Как прикрепить начало одного блока и конец другого к диву?

Ответы