Прокрутка элемента в overflow блоке

117

10 июня 2019, 11:10

Имеется такой дизайн:

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

Попытался установить блоку справа overflow: auto, но обрезается часть ниже красной линии

Можно ли сделать так, чтобы весь правый блок скролился, не обрезая нижнюю часть?

body, 
html { 
  margin: 0; 
  padding: 0; 
} 
 
.menu_jobs_desktop { 
  /* display: grid; */ 
  /* align-self: center; */ 
  overflow: hidden; 
  /* overflow-y: auto; */ 
  margin-left: 181px; 
  width: 354px; 
} 
 
.menu_jobs_desktop_content { 
  background: #181818; 
  width: calc(100% + 20px); 
  overflow: auto; 
  height: 630px; 
} 
 
.menu_jobs { 
  position: absolute; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow-y: scroll; 
  background: #181818; 
  display: none; 
  flex-direction: column; 
  align-items: center; 
} 
 
.menu_jobs_item_answer { 
  font-size: 11px; 
  font-weight: 500; 
  background: white; 
  margin-top: 12px; 
  height: 36px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; } 
 
.menu_jobs_title { 
  color: white; 
  font-size: 22px; 
  width: 224px; 
  margin-top: 72px; 
  margin-bottom: 24px; } 
 
.menu_jobs_item { 
  box-sizing: border-box; 
  width: 224px; 
  position: relative; 
  margin-bottom: 18px; } 
 
.menu_jobs_item:before { 
  border: 1px solid white; 
  content: ""; 
  position: absolute; 
  top: 0px; 
  bottom: 0px; 
  left: 0px; 
  right: 0px; 
  border-radius: 12px; } 
 
.menu_jobs_item:last-child { 
  margin-bottom: 0; } 
 
.menu_jobs_item_title { 
  font-weight: bold; 
  padding-top: 11px; 
  margin-left: 11px; 
  margin-bottom: 6px; 
  font-size: 12px; 
  line-height: 18px; 
  color: white; } 
 
.menu_jobs_item_demand { 
  font-weight: 400; 
  margin-left: 11px; 
  font-size: 12px; 
  color: white; 
  line-height: 18px; } 
 
 
 
.menu { 
  align-items: center; 
  justify-content: center; 
  display: flex; 
  position: absolute; 
  width: 100vw; 
  overflow: hidden; 
  height: 100vh; 
  background: #181818; 
  z-index: 1000; 
  opacity: 1; 
  transition-property: opacity; 
  transition-duration: .5s; 
  font-family: 'Montserrat', sans-serif; 
  } 
 
.menu__contacts_d__wrapper { 
  width: 408px; } 
 
.header__wrap-menu-block { 
  cursor: pointer; } 
 
 
.menu__container { 
  position: relative; 
  width: 180px; 
  text-align: left; 
  color: white; } 
 
.menu__item { 
  box-sizing: border-box; 
  font-family: 'Montserrat'; 
  font-weight: 500; 
  cursor: pointer; 
  position: relative; 
  white-space: nowrap; 
  display: inline-block; 
  padding: 9px 10px; 
  height: 38px; 
  margin-bottom: 14px; 
  font-size: 16px; } 
 
.menu__item:nth-of-type(7) { 
  width: 100%; 
  margin-bottom: 0; } 
 
.menu__item:last-of-type { 
  padding-left: 10px; 
  padding-top: 14px; 
  padding-right: 32px; 
  position: relative; 
  margin-top: 20px; 
  margin-bottom: 0px; 
  height: 44px; } 
 
.menu__triangle { 
  margin-left: 10px; } 
 
.menu__item__rectangle { 
  width: 0; 
  position: relative; 
  height: 2px; 
  top: 7px; 
  background: white; 
  transition-property: width; 
  transition-duration: .5s; 
  transition-timing-function: ease-in; } 
 
.menu__item__text { 
  line-height: 20px; 
  display: inline-flex; 
  align-items: center; } 
 
 
.menu__back { 
  position: absolute; 
  top: 6px; 
  left: 6px; 
  font-family: 'Montserrat'; 
  font-size: 14px; 
  font-weight: bold; 
  width: 115px; 
  height: 36px; 
  color: #8c8c8c; 
  opacity: 0; 
  transition-property: opacity; 
  transition-duration: .3s; 
  display: flex; 
  align-items: center; 
  justify-content: center; } 
 
 
body { 
  touch-action: none; } 
 
.menu__main { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  width: 100vw; 
  height: 100vh; 
  } 
 
 
 
@media (min-width: 360px) { 
  .menu_jobs_title { 
    margin-top: 82px; 
    margin-bottom: 28px; 
    font-size: 26px; 
    width: 248px; } 
  .menu_jobs_item { 
    width: 248px; 
    margin-bottom: 20px; } 
  .menu_jobs_item_title { 
    padding-top: 13px; 
    margin-left: 13px; 
    font-size: 13px; 
    line-height: 20px; 
    margin-bottom: 7px; } 
  .menu__item { 
    font-size: 18px; 
    margin-bottom: 16px; 
    padding: 10px; 
    height: 42px; } 
  .menu__item__text { 
    height: 22px; } 
  .menu__item:last-of-type { 
    width: 203px; 
    margin-top: 40px; 
    height: 50px; } 
  .menu__triangle { 
    width: 14px; 
    height: 14px; 
    margin-left: 14px; } 
  .menu__container { 
    width: 203px; } 
  
  .menu__item__rectangle { 
    top: 8px; } 
   
 
@media (min-width: 768px) { 
  .menu_jobs_item_answer { 
    height: 40px; 
    font-size: 14px; 
    line-height: 21px; 
    margin-top: 18px; } 
  .menu_jobs_title { 
    margin-top: 112px; 
    width: 408px; 
    font-size: 30px; 
    margin-bottom: 36px; } 
  .menu_jobs_item_demand { 
    font-size: 17px; 
    margin-left: 17px; 
    line-height: 26px; } 
  .menu_jobs_item { 
    border-radius: 14px; 
    width: 408px; 
    margin-bottom: 24px; } 
  .menu_jobs_item_title { 
    padding-top: 17px; 
    margin-left: 17px; 
    line-height: 26px; 
    font-size: 17px; 
    margin-bottom: 9px; } 
  .menu__item { 
    font-size: 24px; 
    height: 54px; 
    margin-bottom: 23px; 
    padding: 12px; } 
  .menu__container { 
    width: 271px; } 
  .menu__item:last-of-type { 
    margin-top: 105px; 
    width: 271px; 
    height: 64px; } 
  .menu__triangle { 
    top: 23px; 
    right: 14px; } 
  } 
 
@media (min-width: 768px) { 
  .menu__question__title { 
    font-size: 30px; 
    margin-bottom: 50px; } 
  .menu__question__introduce, .menu__question__contacts { 
    margin-bottom: 25px; } 
  .menu__item { 
    font-size: 24px; } 
  .menu__container { 
    width: 271px; } 
  .menu__item:last-of-type { 
    margin-top: 105px; 
    padding-top: 17px; 
    padding-left: 12px; 
    width: 271px; } 
  .menu__triangle { 
    margin-left: 20px; 
    width: 20px; 
    height: 20px; } 
  .menu__contacts_d__content { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; } 
  .menu__question__active { 
    font-size: 11px !important; } 
  .menu__question__comment__wrapper { 
    width: 100%; 
    height: 141px; } 
  .menu__question__comment_text { 
    font-size: 14px; } 
  .menu__question__send { 
    float: right; 
    width: 129px; 
    font-size: 14px; } 
  .menu__contacts__phone { 
    margin-top: 82px; 
    font-size: 22px; 
    margin-bottom: 12px; } 
  .menu__contacts__email { 
    font-size: 14px; 
    margin-bottom: 24px; 
    height: auto; } 
  .menu__contacts__years { 
    font-size: 16px; } 
  .menu__item__rectangle { 
    top: 12px; } 
  .menu__item:nth-of-type(7) .menu__item__rectangle { 
    top: 13px; } 
  .menu__thanks-back { 
    margin-bottom: 60px; 
    border-radius: 29px; } 
  .menu__thanks-back-text { 
    font-size: 18px; 
    padding: 17px 95px; 
    text-transform: uppercase; } 
  .thanks__title-text { 
    font: 600 66px 'Montserrat Alternates'; } 
  .thanks__title-descr-text { 
    font: 500 22px / 29.7px 'Montserrat Alternates'; } 
  .thanks__title-descr { 
    width: 340px; } 
  .menu__projects_d__item_type { 
    position: absolute; 
    bottom: 0; } 
  .menu__projects_d__item_type::before { 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    top: 5px; 
    bottom: 16px; 
    left: 16px; 
    right: 16px; 
    box-shadow: 0px -2px 28px rgba(0, 0, 0, 0.25); } 
  .menu__projects_d__item { 
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.252038); 
    height: 345px; } 
  .menu__projects_d__item_img { 
    height: 301px; } } 
 
@media (min-width: 1024px) { 
  .menu_jobs_item_title { 
    font-size: 16px; 
    line-height: 1.5; 
    padding-top: 18px; 
    margin-left: 18px; } 
  .menu_jobs_item_demand { 
    font-size: 16px; 
    line-height: 24px; } 
  .menu_jobs_item { 
    width: 374px; 
    margin-bottom: 27px; } 
  .menu_jobs_item_answer { 
    height: 57px; 
    color: black; } 
  .menu_jobs_desktop { 
    width: 374px; } 
  .menu_jobs_desktop_content { 
    height: 486px; 
    } 
  .menu_jobs_title { 
    margin-top: 0; 
    width: 100%; } 
  .menu__item__rectangle { 
    top: 8px; } 
  .menu__item:nth-of-type(7) .menu__item__rectangle { 
    top: 12px; } 
  .menu__container { 
    display: flex; 
    justify-content: flex-start; 
    position: relative; 
    left: -10px; 
    width: 758px; 
    height: 486px; } 
  .menu__item { 
    font-size: 18px; 
    height: 42px; 
    margin-bottom: 22px; 
    padding: 10px; } 
  .menu__item__text { 
    font-size: 18px; } 
  .menu__item:nth-of-type(6) { 
    margin: 0; } 
  .menu__item:nth-of-type(7) { 
    width: 203px; 
    padding-top: 14px; 
    padding-left: 10px; 
    margin-top: 74px; 
    height: 50px; } 
  .menu__triangle { 
    margin-left: 14px; 
    width: 14px; 
    height: 14px; } 
  } 
 
@media (min-width: 1366px) { 
  .menu_jobs_desktop { 
    width: 403px; } 
  .menu_jobs_desktop_content { 
    height: 468px; } 
  .menu_jobs_item { 
    width: 403px; 
    min-height: 154px; 
    max-height: 180px; } 
  .menu_jobs_item:before { 
    border-radius: 14px; } 
  .menu_jobs_item_title { 
    padding-top: 18px; 
    margin-left: 18px; 
    font-size: 17px; 
    line-height: 1.53; } 
  .menu_jobs_item_demand { 
    font-size: 17px; 
    margin-left: 18px; 
    line-height: 1.53; } 
  .menu_jobs_item_answer { 
    height: 57px; 
    border-bottom-left-radius: 14px; 
    border-bottom-right-radius: 14px; } 
  .menu_jobs_title { 
    font-size: 32px; 
    margin-bottom: 35px; } 
  .menu_jobs_desktop { 
    margin-left: 210px; } 
  .menu__container { 
    width: 816px; 
    height: 468px; } 
  .menu__item:nth-of-type(7) { 
    margin-top: 56px; } 
  } 
   
 
@media (min-width: 1920px) { 
  .menu__item { 
    font-size: 20px; 
    height: 44px; 
    margin-bottom: 26px; } 
  .menu__item__text { 
    font-size: 20px; } 
  .menu__item:nth-of-type(7) .menu__item__rectangle { 
    top: 12px; } 
  .menu__item:nth-of-type(7) { 
    padding-top: 15px; 
    padding-left: 11px; 
    margin-top: 140px; 
    width: 226px; 
    height: 54px; } 
  .menu__triangle { 
    width: 16px; 
    height: 16px; 
    margin-left: 16px; } 
  .menu__container { 
    width: 1030px; 
    height: 589px; } 
  .menu_jobs_desktop { 
    margin-left: 300px; 
    width: 1000000000px; } 
  .menu_jobs_item { 
    width: 515px; 
    margin-bottom: 28px; 
    min-height: 184px; 
    max-height: 214px; } 
  .menu_jobs_title { 
    font-size: 36px; 
    margin-bottom: 48px; } 
  .menu_jobs_item_title { 
    font-size: 20px; 
    line-height: 30px; 
    padding-top: 27px; 
    margin-left: 24px; 
    margin-bottom: 12px; } 
   }

<body> 
  <div class="menu"> 
    <!-- Главное окно --> 
    <div class="menu__main"> 
      <div class="menu__main_container"> 
        <div class="menu__container"> 
          <div class="menu_main_left"> 
            <div class="menu__item bg-gray"> 
              <span class="menu__item__text">Проекты</span> 
              <div class="menu__item__rectangle"></div> 
            </div><br> 
            <div class="menu__item bg-gray"> 
              <span class="menu__item__text">Услуги</span> 
              <div class="menu__item__rectangle"></div> 
            </div><br> 
            <div class="menu__item bg-gray"> 
              <span class="menu__item__text">Поддержка</span> 
              <div class="menu__item__rectangle"></div> 
            </div><br> 
            <div class="menu__item bg-gray"> 
              <span class="menu__item__text">Контакты</span> 
              <div class="menu__item__rectangle"></div> 
            </div><br> 
            <div class="menu__item bg-gray"> 
              <span class="menu__item__text">Вакансии</span> 
              <div class="menu__item__rectangle"></div> 
            </div><br> 
            <div class="menu__item bg-gray"> 
              <span class="menu__item__text">О нас</span> 
              <div class="menu__item__rectangle"></div> 
            </div><br> 
            <div class="menu__item bg-gray"> 
              <span class="menu__item__text">Заказать проект 
                <svg class="menu__triangle" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2111 6.89444L1.44721 11.2764C0.953235 11.5234 0.352562 11.3232 0.105573 10.8292C0.0361451 10.6903 0 10.5372 0 10.382V1.61804C0 1.06576 0.447715 0.618042 1 0.618042C1.15525 0.618042 1.30836 0.654187 1.44721 0.723615L10.2111 5.10558C10.7051 5.35257 10.9053 5.95324 10.6584 6.44722C10.5616 6.64075 10.4047 6.79767 10.2111 6.89444Z" fill="white" /> 
                </svg> 
              </span> 
              <div class="menu__item__rectangle"></div> 
            </div> 
          </div> 
          <!-- Окно "Вакансии" для десктопа --> 
          <div class="menu_jobs_desktop"> 
            <div class="menu_jobs_desktop_content"> 
              <div class="menu_jobs_title">Вакансии</div> 
              <div class="menu_jobs_item"> 
                <div class="menu_jobs_item_title">Junior Front-end developer:</div> 
                <div class="menu_jobs_item_demand">- HTML+CSS3</div> 
                <div class="menu_jobs_item_demand">- Angular/React/Vue.js</div> 
                <div class="menu_jobs_item_answer">ОТКЛИКНУТЬСЯ</div> 
              </div> 
              <div class="menu_jobs_item"> 
                <div class="menu_jobs_item_title">Junior Back-end developer:</div> 
                <div class="menu_jobs_item_demand">- .NET/Node.js</div> 
                <div class="menu_jobs_item_answer">ОТКЛИКНУТЬСЯ</div> 
              </div> 
              <div class="menu_jobs_item"> 
                <div class="menu_jobs_item_title">Web-designer:</div> 
                <div class="menu_jobs_item_demand">- Векторные редакторы (Adobe XD/Figma/Sketch)</div> 
                <div class="menu_jobs_item_answer">ОТКЛИКНУТЬСЯ</div> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</body>

Полный код

UPD:

Блок должен уходить вверх и заканчиваться красной линией

Answer 1

Могу предложить такой пример\вариант со sticky позиционированием:

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
 /*  width: 100%; 
  height: 100%; */ 
} 
 
body { 
  font-family: sans-serif; 
} 
 
.menu { 
  width: 100%; 
  height: 100%; 
  background: #181818; 
  color:#fff; 
} 
 
.menu-inner { 
  position: relative; 
  max-width: 758px; 
  width: 100%; 
  height: 100%; 
  margin: 0 auto; 
} 
 
.menu ul { 
  list-style-type: none; 
  padding: 0; 
} 
 
.menu-left { 
  padding-bottom: 2px; 
} 
 
.menu-left ul { 
  list-style-type: none; 
  padding: 0; 
  margin: 30px 0 50px; 
} 
 
.menu-left ul>li { 
  height: 42px; 
  margin-bottom: 22px; 
  padding: 10px; 
} 
 
 
.menu-link { 
  text-decoration: none; 
  color:#fff; 
  font-size: 18px; 
  line-height: 22px; 
  display: inline-block; 
  position: relative; 
  padding-right: 15px; 
} 
 
.menu-left ul+.menu-link { 
  white-space:nowrap; 
  height: 42px; 
  padding: 10px; 
} 
 
.menu-link:after { 
  content: ''; 
  position: absolute; 
  right: 0; 
  top:50%; 
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent; 
  border-left: 5px solid #fff; 
  border-bottom: 5px solid transparent; 
  margin-top: -5px; 
} 
 
 
.menu-right { 
  padding-left: 10px; 
  padding-right: 10px; 
} 
 
 
h3 { 
  font-size: 30px; 
  margin-bottom: 36px; 
} 
 
 
.jobs-item { 
  border-radius: 14px; 
  max-width: 400px; 
  width: 100%; 
  margin-bottom: 27px; 
  position: relative; 
  border:1px solid #fff; 
  padding-bottom: 57px; 
  overflow: hidden; 
} 
 
 
.jobs-bottom { 
  height: 57px; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 10; 
  background: #fff; 
  text-align: center; 
} 
 
.jobs-bottom>a { 
  text-decoration: none; 
  color:#000; 
  display: block; 
  position: relative; 
  top:50%; 
  transform:translateY(-50%); 
  font-size: 14px; 
  line-height: 21px; 
} 
 
.jobs-body { 
  padding: 18px; 
} 
 
.jobs-title { 
  font-size: 16px; 
  line-height: 1.5; 
  margin:0 0 9px; 
} 
 
.jobs-desc { 
  font-size: 16px; 
  line-height: 1.5; 
} 
 
.jobs-desc ul>li { 
  position: relative; 
} 
 
.jobs-desc ul>li:before { 
  content: '-'; 
  display: inline-block; 
  margin-right: 4px; 
} 
 
@media (min-width:640px){ 
  .menu-inner { 
    display: flex; 
    justify-content: space-between; 
  } 
   
  .menu-left { 
    position: sticky; 
    top: 10px; 
    z-index: 10; 
    padding-bottom: 72px; 
    align-self: flex-start; 
  } 
   
  .menu-left ul+.menu-link { 
    position: absolute; 
    bottom: 30px; 
    left: 0; 
    z-index: 2; 
  } 
   
  .menu-right { 
    padding-left: 0px; 
    padding-right: 0px; 
  } 
}

<div class="menu"> 
  <div class="menu-inner"> 
    <div class="menu-left"> 
      <ul> 
        <li> 
          <a href="#" class="menu-link"> 
            Проекты 
          </a> 
        </li> 
        <li> 
          <a href="#" class="menu-link"> 
            Услуги 
          </a> 
        </li> 
        <li> 
          <a href="#" class="menu-link"> 
            Поддержка 
          </a> 
        </li> 
        <li> 
          <a href="#" class="menu-link"> 
            Контакты 
          </a> 
        </li> 
        <li> 
          <a href="#" class="menu-link"> 
            Вакансии 
          </a> 
        </li> 
        <li> 
          <a href="#" class="menu-link"> 
            О нас 
          </a> 
        </li> 
      </ul> 
 
      <a href="#" class="menu-link">Заказать проект</a> 
    </div> 
 
    <div class="menu-right"> 
      <h3>Вакансии</h3> 
 
      <div class="jobs-list"> 
        <div class="jobs-item"> 
          <div class="jobs-body"> 
            <h6 class="jobs-title"> 
              Junior Front-end developer: 
            </h6> 
            <div class="jobs-desc"> 
              <ul> 
                <li> 
                  HTML+CSS3 
                </li> 
                <li> 
                  Angular/React/Vue.js 
                </li> 
              </ul> 
            </div> 
          </div> 
          <div class="jobs-bottom"> 
            <a href="#">ОТКЛИКНУТЬСЯ</a> 
          </div> 
        </div> 
 
        <div class="jobs-item"> 
          <div class="jobs-body"> 
            <h6 class="jobs-title"> 
              Junior Back-end developer: 
            </h6> 
            <div class="jobs-desc"> 
              <ul> 
                <li> 
                  .NET/Node.js 
                </li> 
              </ul> 
            </div> 
          </div> 
          <div class="jobs-bottom"> 
            <a href="#">ОТКЛИКНУТЬСЯ</a> 
          </div> 
        </div> 
 
        <div class="jobs-item"> 
          <div class="jobs-body"> 
            <h6 class="jobs-title"> 
              Web-designer: 
            </h6> 
            <div class="jobs-desc"> 
              <ul> 
                <li> 
                  Векторные редакторы (Adobe XD/Figma/Sketch) 
                </li> 
              </ul> 
            </div> 
          </div> 
          <div class="jobs-bottom"> 
            <a href="#">ОТКЛИКНУТЬСЯ</a> 
          </div> 
        </div> 
 
        <div class="jobs-item"> 
          <div class="jobs-body"> 
            <h6 class="jobs-title"> 
              Web-designer: 
            </h6> 
            <div class="jobs-desc"> 
              <ul> 
                <li> 
                  Векторные редакторы (Adobe XD/Figma/Sketch) 
                </li> 
              </ul> 
            </div> 
          </div> 
          <div class="jobs-bottom"> 
            <a href="#">ОТКЛИКНУТЬСЯ</a> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Или такой вариант с плагином mCustomScrollbar.:

$(window).load(function(){ 
 
    $(".mCustomScrollbar").mCustomScrollbar({ 
      theme:"minimal", 
      scrollbarPosition: 'outside' 
    }); 
});

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
 width: 100%; 
} 
 
body { 
  font-family: sans-serif; 
} 
 
.menu { 
  width: 100%; 
  height: 100%; 
  background: #181818; 
  color:#fff; 
} 
 
.menu-inner { 
  position: relative; 
  max-width: 758px; 
  width: 100%; 
  height: 100%; 
  margin: 0 auto; 
} 
 
.menu ul { 
  list-style-type: none; 
  padding: 0; 
} 
 
.menu-left { 
  padding-bottom: 2px; 
} 
 
.menu-left ul { 
  list-style-type: none; 
  padding: 0; 
  margin: 30px 0 50px; 
} 
 
.menu-left ul>li { 
  height: 42px; 
  margin-bottom: 22px; 
  padding: 10px; 
} 
 
 
.menu-link { 
  text-decoration: none; 
  color:#fff; 
  font-size: 18px; 
  line-height: 22px; 
  display: inline-block; 
  position: relative; 
  padding-right: 15px; 
} 
 
.menu-left ul+.menu-link { 
  white-space:nowrap; 
  height: 42px; 
  padding: 10px; 
} 
 
.menu-link:after { 
  content: ''; 
  position: absolute; 
  right: 0; 
  top:50%; 
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent; 
  border-left: 5px solid #fff; 
  border-bottom: 5px solid transparent; 
  margin-top: -5px; 
} 
 
 
.menu-right { 
  padding-left: 10px; 
  padding-right: 10px; 
  height: 100%; 
} 
 
.jobs-list { 
  height: calc(100% - 100px); 
} 
 
 
h3 { 
  font-size: 30px; 
  margin-bottom: 36px; 
} 
 
 
.jobs-item { 
  border-radius: 14px; 
  max-width: 400px; 
  width: 100%; 
  margin-bottom: 27px; 
  position: relative; 
  border:1px solid #fff; 
  padding-bottom: 57px; 
  overflow: hidden; 
} 
 
 
.jobs-bottom { 
  height: 57px; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 10; 
  background: #fff; 
  text-align: center; 
} 
 
.jobs-bottom>a { 
  text-decoration: none; 
  color:#000; 
  display: block; 
  position: relative; 
  top:50%; 
  transform:translateY(-50%); 
  font-size: 14px; 
  line-height: 21px; 
} 
 
.jobs-body { 
  padding: 18px; 
} 
 
.jobs-title { 
  font-size: 16px; 
  line-height: 1.5; 
  margin:0 0 9px; 
} 
 
.jobs-desc { 
  font-size: 16px; 
  line-height: 1.5; 
} 
 
.jobs-desc ul>li { 
  position: relative; 
} 
 
.jobs-desc ul>li:before { 
  content: '-'; 
  display: inline-block; 
  margin-right: 4px; 
} 
 
@media (min-width:640px){ 
   
  html, 
  body { 
    height: 100%; 
  } 
   
   
  .menu-inner { 
    display: flex; 
    justify-content: space-between; 
  } 
   
  .menu-left { 
    padding-bottom: 72px; 
  } 
   
  .menu-right { 
    height: 100%; 
  } 
   
  .menu-left ul+.menu-link { 
    position: absolute; 
    bottom: 30px; 
    left: 0; 
    z-index: 2; 
  } 
   
  .menu-right { 
    padding-left: 0px; 
    padding-right: 0px; 
  } 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" /> 
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script> 
   
  <div class="menu"> 
    <div class="menu-inner"> 
      <div class="menu-left"> 
        <ul> 
          <li> 
            <a href="#" class="menu-link"> 
              Проекты 
            </a> 
          </li> 
          <li> 
            <a href="#" class="menu-link"> 
              Услуги 
            </a> 
          </li> 
          <li> 
            <a href="#" class="menu-link"> 
              Поддержка 
            </a> 
          </li> 
          <li> 
            <a href="#" class="menu-link"> 
              Контакты 
            </a> 
          </li> 
          <li> 
            <a href="#" class="menu-link"> 
              Вакансии 
            </a> 
          </li> 
          <li> 
            <a href="#" class="menu-link"> 
              О нас 
            </a> 
          </li> 
        </ul> 
 
        <a href="#" class="menu-link">Заказать проект</a> 
      </div> 
 
      <div class="menu-right "> 
        <h3>Вакансии</h3> 
 
        <div class="jobs-list mCustomScrollbar"> 
          <div class="jobs-item"> 
            <div class="jobs-body"> 
              <h6 class="jobs-title"> 
                Junior Front-end developer: 
              </h6> 
              <div class="jobs-desc"> 
                <ul> 
                  <li> 
                    HTML+CSS3 
                  </li> 
                  <li> 
                    Angular/React/Vue.js 
                  </li> 
                </ul> 
              </div> 
            </div> 
            <div class="jobs-bottom"> 
              <a href="#">ОТКЛИКНУТЬСЯ</a> 
            </div> 
          </div> 
 
          <div class="jobs-item"> 
            <div class="jobs-body"> 
              <h6 class="jobs-title"> 
                Junior Back-end developer: 
              </h6> 
              <div class="jobs-desc"> 
                <ul> 
                  <li> 
                    .NET/Node.js 
                  </li> 
                </ul> 
              </div> 
            </div> 
            <div class="jobs-bottom"> 
              <a href="#">ОТКЛИКНУТЬСЯ</a> 
            </div> 
          </div> 
 
          <div class="jobs-item"> 
            <div class="jobs-body"> 
              <h6 class="jobs-title"> 
                Web-designer: 
              </h6> 
              <div class="jobs-desc"> 
                <ul> 
                  <li> 
                    Векторные редакторы (Adobe XD/Figma/Sketch) 
                  </li> 
                </ul> 
              </div> 
            </div> 
            <div class="jobs-bottom"> 
              <a href="#">ОТКЛИКНУТЬСЯ</a> 
            </div> 
          </div> 
 
          <div class="jobs-item"> 
            <div class="jobs-body"> 
              <h6 class="jobs-title"> 
                Web-designer: 
              </h6> 
              <div class="jobs-desc"> 
                <ul> 
                  <li> 
                    Векторные редакторы (Adobe XD/Figma/Sketch) 
                  </li> 
                </ul> 
              </div> 
            </div> 
            <div class="jobs-bottom"> 
              <a href="#">ОТКЛИКНУТЬСЯ</a> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как переместить только одну точку из множества в SVG?

Пишу SVG + анимация, и столкнулся с такой задачей,- нужно анимировать только одну точку из множества в координатах SVG(чтобы эта точка плавно...

C# работа с DateTime

пытался выгуглить но не чего не смог найтиМожно ли как то упросить данный код смотрел на сайте майкрософт все возможные ответы от DateTime и обнаружил...

121

Преобразовать object[] в string[]

Собственно вопрос в шапке

147

WPF C# Обращение к объекту через ссылку

Пытаюсь обратиться к элементу из ссылок таким образом:

138