Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.06.2020, 16:27
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,194

Помогите сверстать макет
Здравствуйте.

Не получается сверстать этот layout:
https://drive.google.com/file/d/1pAR...ca9wcTxtI/view

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

Подскажите, пожалуйста, каким образом можно сверстать подобный layout?

Мои последние потуги:
https://jsfiddle.net/NexusDeveloper/sfv3w7ym/16/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row wrapper">
    <div class="col-3 sidebar">
      <div class="background"></div>
    </div>
    <div class="col-9 content"></div>
  </div>
</div>

<style>
    .wrapper {
      min-height: 100vh;
      /* при 100% проблема видна уже на full-hd мониторах, при -100vw градиент превращается в обычную заливку */
    }

    .background {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: -100%;
      margin: auto;
      background: linear-gradient(247.24deg, rgba(127, 240, 255, 0.3) 0%, rgba(221, 19, 221, 0.3) 101.17%);
    }
</style>
Изображения:
Тип файла: jpg 2020-06-22_160916.jpg (7.2 Кб, 7 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.06.2020, 16:35
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,194

Вроде бы нашел решение.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="background">
    <div class="container">
      <div class="row wrapper">
        <div class="col-3 sidebar"></div>
        <div class="col-9 content"></div>
      </div>
    </div>
</div>

<style>
    .wrapper {
        min-height: 130vh;
    }
    
    .background {
        position: relative;
    }

    .background:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 70%;
        left: 0;
        margin: auto;
        background: linear-gradient(247.24deg, rgba(127, 240, 255, 0.3) 0%, rgba(221, 19, 221, 0.3) 101.17%);
        z-index: -1;
    }

    .content {
        background: #FFF;
    }
</style>

Последний раз редактировалось Nexus, 22.06.2020 в 17:01.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обратный отсчёт, помогите Reapper Элементы интерфейса 1 03.03.2018 14:57
Какими элементами и классами Bootstrap сверстать вот такой макет? SeregaNv (X)HTML/CSS 3 21.09.2017 23:41
Люди, помогите дилетанту! Как объеденить скрипты в один файл? patroklit Элементы интерфейса 3 04.12.2013 11:55
Трехколоночный макет ansi_str (X)HTML/CSS 21 27.09.2012 13:23
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 22:50