1

Ожидается чтобы блок с надписью "Аренда Помещений" растянулся на всю высоту header но при этом вычиталась ширина навбара, и да javascript не предлагать.

* {
  margin: 0;
}

body {
  font-family: sans-serif;
}

.flex-2-cols {
  display: flex;
  align-items: center;
  background: red;
}

.flex-2-cols>* {
  width: 50%;
}

nav {
  padding: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.7);
}

header {
  height: 100vh;
  background-position: center;
  /*display: flex;*/
  -webkit-background-size: cover;
  background-size: cover;
  background-image: url("https://cdn.pixabay.com/photo/2016/04/28/20/57/architecture-1359707_960_720.jpg");
}
<!DOCTYPE html>
<html>

<head>
  <link href="./scss/main.css" rel="stylesheet">
  <meta charset="utf-8">
  <title>Lorem ipsum</title>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li class="logo">Арендент</li>
      </ul>
    </nav>
    <div class="flex-2-cols">
      <h1>Аренда помещений</h1>
      <div class="left-side-form">
        <form><input type="text"></form>
      </div>
    </div>
  </header>
</body>

</html>

2 ответа 2

0

Сделать header флексом с вертикальной осью, добавить flex-grow: 1 для .flex-2-cols.

* {
  margin: 0;
}

body {
  font-family: sans-serif;
}

.flex-2-cols {
  display: flex;
  align-items: center;
  background: red;
  flex-grow: 1;
}

.flex-2-cols>* {
  width: 50%;
}

nav {
  padding: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.7);
}

header {
  height: 100vh;
  background-position: center;
  display: flex;
  flex-direction: column;
  -webkit-background-size: cover;
  background-size: cover;
  background-image: url("https://cdn.pixabay.com/photo/2016/04/28/20/57/architecture-1359707_960_720.jpg");
}
<!DOCTYPE html>
<html>

<head>
  <link href="./scss/main.css" rel="stylesheet">
  <meta charset="utf-8">
  <title>Lorem ipsum</title>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li class="logo">Арендент</li>
      </ul>
    </nav>
    <div class="flex-2-cols">
      <h1>Аренда помещений</h1>
      <div class="left-side-form">
        <form><input type="text"></form>
      </div>
    </div>
  </header>
</body>

</html>

1
  • да то что нужно
    – user245150
    9 окт 2017 в 9:50
0

Вот так?

* {
  margin: 0;
}

body {
  font-family: sans-serif;
}

.flex-2-cols {
  display: flex;
  align-items: center;
  background: red;
  height: 100%;
}

.flex-2-cols>* {
  width: 50%;
}

nav {
  padding: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.7);
}

header {
  height: 100vh;
  background-position: center;
  display: flex;
  -webkit-background-size: cover;
  background-size: cover;
  background-image: url("https://cdn.pixabay.com/photo/2016/04/28/20/57/architecture-1359707_960_720.jpg");
}
<!DOCTYPE html>
<html>

<head>
  <link href="./scss/main.css" rel="stylesheet">
  <meta charset="utf-8">
  <title>Lorem ipsum</title>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li class="logo">Арендент</li>
      </ul>
    </nav>
    <div class="flex-2-cols">
      <h1>Аренда помещений</h1>
      <div class="left-side-form">
        <form><input type="text"></form>
      </div>
    </div>
  </header>
</body>

</html>

Ваш ответ

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