1

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

Вертикальные направляющие это границы контейнера (.container с max-width: 1200px).

Суть задачи в том, чтобы в .container с фикс. шириной, запихнуть два блока, один с фикс. шириной, другой заполняющий остальную часть.

Края этих блоков должны быть на 100% (т.е. прижаты к краю браузера).

Но самое главное что эти блоки, которые в контейнере, для них должна быть возможность размещения контента, чтобы не выходили за пределы контейнера.

3
  • 1
    Сколько можно задавать один и тот же вопрос? Читайте про отрицательный margin и calc. 31 дек 2017 в 11:52
  • 1
    Возможный дубликат вопроса: Верстка 2-х блоков с 100% шириной в контейнере 31 дек 2017 в 11:54
  • это можно реализовать на всех технологиях .. от table до flexbox , разве что под Arachne всё равно не получится стилизовать
    – user33274
    31 дек 2017 в 13:18

3 ответа 3

1

В общем, три самых распространённых варианта

  1. Решение с использованием overflow и float

    body {margin: 0;}
    
    .container {
      width: 100%;
      height: 52px;
      background-color: yellow;
    }
    
    .Block-0 {
      width: 100px;
      height: 100%;
      background-color: red;
      float: left; /* ! */
    }
    .Block-1 {
      width: auto;
      height: 100%;
      background-color: blue;
      overflow: auto; /* ! */
    }
    <div class="container">
      <div class="Block-0"></div>
      <div class="Block-1"></div>
    </div>

  2. Решение с использованием flexbox

    body {margin: 0;}
    
    .container {
      display: flex; /* ! */
      width: 100%;
      height: 52px;
      background-color: yellow;
    }
    
    .Block-0 {
      width: 100px;
      background-color: red;
    }
    .Block-1 {
      flex-grow: 1; /* ! */
      background-color: blue;
      overflow: auto;
    }
    <div class="container">
      <div class="Block-0"></div>
      <div class="Block-1"></div>
    </div>

  3. Решение с использованием table

    body {margin: 0;}
    
    .container {
      display: table; /* ! */
      width: 100%;
      height: 52px;
      background-color: yellow;
    }
    
    .Block-0 {
      display: table-cell; /* ! */
      width: 100px;
      background-color: red;
    }
    .Block-1 {
      display: table-cell; /* ! */
      background-color: blue;
      overflow: auto;
    }
    <div class="container">
      <div class="Block-0"></div>
      <div class="Block-1"></div>
    </div>

1

если правильно понял:

body {
  margin: 0;
}
.hero {
  height: 300px;
  background: #fff;
}
.container {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  border-right: 1px solid black;
  border-left: 1px solid black;
  
}
.hero__inner {
  display: flex;
  color: #000;
}
.logo {
  width: 100px;
  height: 30px;
  background-color: rgba(255,0,0,.5);
  margin-left: calc((100% - 100vw) / 2);
  padding-left: calc((100vw - 100%) / 2);
  
}
.hero__content {
  flex: 1;
  background-color: rgba(0,255,0,.5);
  margin-right: calc((100% - 100vw) / 2);
  padding-right: calc((100vw - 100%) / 2);
}
<div class="hero">
  <div class="container">
    <div class="hero__inner">
      <div class="logo">logo</div>
      <div class="hero__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum alias dicta doloremque temporibus laudantium at suscipit facilis esse deserunt, quam amet perspiciatis obcaecati optio. Quasi amet tempora culpa qui, neque veniam impedit animi nam distinctio.</div>
    </div>
   </div>
</div>

1

Пример

html,
body {
  overflow-x: hidden;
}

.topbar {
  background: #7366FE;
}

.topbar .container,
.topbar [class*=col-] {
  padding-left: 0;
  padding-right: 0;
}

.topbar .row {
  margin-left: 0;
  margin-right: 0;
}

.topbar__logo {
  display: block;  
  padding: 5px;
  color: #fff;  
  text-align: center;
}

.topbar__line {
  text-align: right;
  padding: 5px;
  position: relative;
}

.topbar__line:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
}

.topbar__line,
.topbar__line:after {
  background: #F2F2F2;
}

.topbar__line--2,
.topbar__line--2:after {
  background: #CC293A;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="topbar">
  <div class="container">
    <div class="row">
      <div class="col-xs-3">
        <a href="#" class="topbar__logo">LOGO</a>
      </div>
      <div class="col-xs-9">
        <div class="topbar__line">line 1</div>
        <div class="topbar__line topbar__line--2">line 2</div>
      </div>
    </div>
  </div>
</div>

Ваш ответ

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

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