Как при помощи только CSS и HTML вывести два квадрата на всю ширину окна браузера (вне зависимости от разрешения)?

Именно квадрата, не прямоугольника. Имеется следующий код, но это фиксированные величины, не подходит:

Собственно CSS:

.wrapper {
    display: table;
  }
  .red {
    width: 500px;
    height: 500px;
    background: red;
    display: table-cell;
  }
  .blue {
    width: 500px;
    height: 500px;
    background: blue;
    display: table-cell;
  }


И иже с ним HTML:

<!DOCTYPE html>
 
<html>
 
<head>
 
<link rel="stylesheet" type="text/css" href="style.css">
 
<meta charset="utf-8">
 
<title> Разметка квадраты </title>
 
</head>
 
<body>
 
<p>Тут пример: отображение CSS-стилей в документе HTML </p>

<div class="wrapper">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
 
</body>
 
</html>


Вот печальный результат (а нужно на всю ширину):

5c496645af864853246468.png
  • Вопрос задан
  • 2591 просмотр
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Чтобы создать квадрат, нужно указан нужную ширину блоку, не указывать высоту, добавить :after, и ему уже указать padding-bottom: 100%
пример https://jsfiddle.net/Vlad_IT/qb3xo02j/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@dmitry_pacification
Трудности рождают прорыв
Сейчас уже так пишу. Раньше долбался всякими inline-block и floaтами
.wrapper {
    display: flex;
    flex-flow: row nowrap
  }
  .red {
    flex: 1 0 50%;
    background: red;
  }
  .blue {
    flex: 1 0 50%;
    background: blue;
  }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы