Как выровнять два div друг под другом? (Верхний div разрезается пополам)

Я пытаюсь выровнять два div по вертикали, я знаю, как это сделать. Но возникает другая проблема: верхний блок div («верхняя полоса») разрезается пополам, когда я помещаю второй блок под ним, и у меня нет причин, почему. Должен ли я использовать position: absolute для решения этой проблемы? Однако я стараюсь избегать этого, когда могу. Спасибо!

body {
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
    font-family: sans-serif;
}

.homepage-window {
    height: 100vh;
    display: flex;
}

.nav-bar {
    width: 18%;
    background-color: #2E3E4E;
}

.top-bar {
    height: 8%;
    width: 100%;
    background-color: white;
    border-bottom: 0.5px solid lightgrey;
}

.bottom-bar {
    margin-top: 20%;
    height: 8%;
    width: 100%;
    background-color: white;
    border-bottom: 0.5px solid lightgrey;
}
/*border-top: 0.5px solid lightgrey;*/

<!DOCTYPE html>
<html>
<link rel = "stylesheet" type = "text/css" href = "CSS/Homepage.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class = "homepage-window">
    <div class = "nav-bar">

    </div>
    <div class = "top-bar">

    </div>
    <div class = "bottom-bar">

    </div>
</div>
</body>
</html>

Включено ли больше CSS в home.css или это тот CSS, который у вас есть?

— 08.06.2018 14:05

@ user2796515 Нет, это все, что у меня есть.

— 08.06.2018 14:06

Их не разрезают пополам, три элемента раскладываются слева направо в контейнере flex. Поскольку у них обоих есть width:100%, браузер должен уменьшить их, чтобы они поместились.

— 08.06.2018 14:10

На картинке, которую вы разместили, видно, что div разрезан пополам? Вы имеете в виду разрезать пополам по горизонтали?

— 08.06.2018 14:24

html css

08.06.2018 14:02

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Оберните div верхнего и нижнего столбца в другой div-оболочку с шириной: 100%;

<div style = "width: 100%;">
  <div class = "top-bar">

   </div>
   <div class = "bottom-bar">

   </div>
</div>

В вашем случае все 3 div помещаются в гибкий контейнер, выравнивая их в одной строке. Вот почему вам нужно сохранить div верхней и нижней панели в другом контейнере div.

 
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}

.homepage-window {
height: 100vh;
display: flex;
}

.nav-bar {
width: 18%;
background-color: #2E3E4E;
}

.top-bar {
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}

.bottom-bar {
margin-top: 20%;
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}

<!DOCTYPE html>
<html>
<link rel = "stylesheet" type = "text/css" href = "CSS/Homepage.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class = "homepage-window">
<div class = "nav-bar">

</div>
<div style = "width: 100%;">
    <div class = "top-bar">

    </div>
    <div class = "bottom-bar">

    </div>
</div>
</div>
</body>
</html>

08.06.2018 14:06

Другие вопросы по теме

Как создать таблицу и стилизовать ее в PHP

Увидеть точную специфику CSS в Chrome Dev Tools?

Встроенный блок Bootstrap не работает должным образом

Как сделать так, чтобы легенда диаграммы Google отображалась снизу и вертикально?

Как остановить перемещение div в нижний правый угол

Почему мой первый фон div не красный

CSS и изображения не загружаются на некоторых устройствах - wordpress

Как заставить div соблюдать верхнюю границу поля

Первый переход не работает, потому что начальная высота не установлена

Как я могу создать полосу прокрутки для Windows в Firefox?

Как выровнять два div друг под другом? (Верхний div разрезается пополам)

Ответы 1

Другие вопросы по теме

Похожие вопросы