Как я могу выровнять div ниже моего navbar? - PullRequest
Новая
       18

Как я могу выровнять div ниже моего navbar?

3 голосов
/ 09 мая 2019

У меня есть макет с навигационной панелью и 4 дел.Первый div обрезается с помощью navbar.Кто-нибудь знает, что я могу сделать? 

<body>
  <div id="app" class="flex-container">
    <nav class="navbar default-layout p-0 fixed-top d-flex flex-row" style="height: 63px;">
      <select id="region" onchange="initProcess();" style="position:absolute;background:#eaeaea;">
      </select>
      <div style="width: calc(100% - 74px); padding-left: 74px; left: 0; text-align: center; color: #fff">
        <img src="images/co-logo.png" style="width: 100px; margin-top: -6px">
        <h4>Dashboards</h4>
      </div>
      <div class="navbar-menu-wrapper d-flex align-items-right">
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-right" type="button" data-toggle="offcanvas">
                    <span class="mdi mdi-menu"></span>
                </button>
      </div>
    </nav>
    <div class="flex-item" style="background-color:red"></div>
    <div class="flex-item" style="background-color:blue"></div>
    <div class="flex-item" style="background-color:yellow"></div>
    <div class="flex-item" style="background-color:grey"></div>
  </div>
</body>

enter image description here

Ответы [ 3 ]

2 голосов
/ 09 мая 2019

Вы можете легко добавить свойство css padding-top, равное высоте панели навигации.в вашем случае это будет: 

.flex-container {
     padding-top: 63px;
}
1 голос
/ 09 мая 2019

Этот CSS будет работать в вашем случае: 

body {
    margin: 0;
    padding: 0;
}
.flex-container {
    position: relative;
    padding-top: 100px;
}
.navbar {
    position: fixed;
    top: 0;
    background: purple;
    z-index: 1;
    width: 100%;
}
.flex-item {
    width: 100%;
    height: 60px;
}
.flex-container .flex-item:first-of-type {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 50px;
}
1 голос
/ 09 мая 2019

Так как navbar установлен на position:fixed, он игнорирует нормальный поток элементов.Из-за этого под ним выравниваются другие элементы.В этом случае просто добавьте margin-top: 63px; к первому элементу, и все готово (63px - это та же высота, что и ваша панель навигации).

...