Bootstrap 4 DIV NAVBAR Макет в полноэкранном режиме - PullRequest
Новая
       11

Bootstrap 4 DIV NAVBAR Макет в полноэкранном режиме

1 голос
/ 08 января 2020

Мне нужна ваша помощь с настройкой макетов. Я новичок в FE dev. Я должен сделать макет, как на картинке:

желаемый макет

* NAV на картинке - это NAVBAR Bootstrap компоненты

Как сделать Правильно ли, чтобы navbars и div содержимого были растянуты до полной высоты страницы? Когда я использую атрибут min-height: 100vh для nav3, я получаю полосы прокрутки. Я подозреваю, что этот атрибут получает высоту полного окна, и я должен вычесть высоту nav2. Я надеюсь, что для этого есть простой солютон. 

#dashboardContainer {
  display: flex;
  align-items: stretch;
}

#dashboardNav {
  height: 84px;
  width: 100%;
}

#rightBar {
  width: 376px;
}

#content {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s;
}

#sidebar {
  min-width: 175px;
  max-width: 175px;
}
<body class="dashboardBody">

  <div id="dashboardContainer">

    <nav id="sidebar">
      <!-- Left expandable sidebar  -->
    </nav>


    <div class="d-flex flex-column" id="content">
      <nav class="navbar navbar-expand-lg navbar-light p-0 justify-content-end" id="dashboardNav">
        <!-- Top navbar  -->
      </nav>
      <div>
        <div>
          <!-- Content  -->
        </div>

        <nav id="rightBar">
          <!-- Right sidebar  -->
        </nav>
      </div>
    </div>
  </div>

Ответы [ 2 ]

2 голосов
/ 08 января 2020

Пожалуйста, просмотрите мои html и css Тщательно.

Надеюсь, это поможет вам. :)

Дайте мне знать, если у вас есть какие-либо вопросы. 

 #dashboardContainer {
  display: flex;
  align-items: stretch;
}

#dashboardNav {
  height: 84px;
  width: 100%;
  background: #4154da;
}

#rightBar {
  width: 376px;
}

#content {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s;
}

#sidebar {
  min-width: 175px;
  max-width: 175px;
  background: #de3232;
}
nav#rightBar {
  width: 20%;
    flex-basis: 20%;
    background: #dec514;
    max-width: 175px;
}
.body-content {
    height: calc(100vh - 84px);
    width: 100%;
    flex-basis: 80%;
}
.dashboard {
    display: flex;
    justify-content: space-between;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<body class="dashboardBody">

    <div id="dashboardContainer">
  
      <nav id="sidebar">
        <!-- Left expandable sidebar  -->
        <h2>sidebar</h2>
      </nav>
  
  
      <div class="d-flex flex-column" id="content">
        <nav class="navbar navbar-expand-lg navbar-light p-0 justify-content-end" id="dashboardNav">
            <h2>Top navbar</h2>
        </nav>
        <div class="dashboard">
          <div class="body-content">
            <!-- Content  -->
            <h2>Body content</h2>
          </div>
  
          <nav id="rightBar">
            <!-- Right sidebar  -->
            <h2>Right sidebar</h2>
          </nav>
        </div>
      </div>
    </div>
1 голос
/ 08 января 2020

Вот код. Надеюсь, это поможет вам. Если какие-либо изменения, пожалуйста, дайте мне знать. 

.dashboardContainer {
  display: flex;
  align-items: stretch;
  height: 100vh;
}

.dashboard-content {
  width: 100%;
}

#dashboardNav {
  height: 84px;
  width: 100%;
  background: purple;
  display: flex;
  justify-content: center;
}

.dashboard-wrap-content {
  display: flex;
  height: calc(100% - 84px)
}

.dashboard-left {
  width: 80%;
}

.rightBar {
  width: 20%;
  background: yellow;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar h4{
  text-align: center;
}
#content {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s;
}

#sidebar {
  min-width: 100px;
  max-width: 100px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-left {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

h4 {
  font-weight: bold;
  background: #fff;
  margin-bottom:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="dashboardBody">

  <div class="dashboardContainer">

    <nav id="sidebar">
      <!-- Left expandable sidebar  -->
      <h4>NAV1</h4>
    </nav>


    <div class="dashboard-content">
      <nav class="navbar navbar-expand-lg navbar-light p-0" id="dashboardNav">
        <h4>NAV2</h4>
      </nav>
      <div class="dashboard-wrap-content">
        <div class="dashboard-left">
          <!-- Content  -->
          Content
        </div>

        <nav class="rightBar">
          <!-- Right sidebar  -->
          <h4>NAV3</h4>
        </nav>
      </div>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...