即使在多次更改定位后，侧边栏也不会延伸到整个页面？

Question

我有一个应用程序，我想在其中使用包含主要 URL 和带有导航栏的品牌名称的侧边栏，用于一些其他页面，例如常见问题解答和关于我们。

但是，我在使侧边栏绝对定位时遇到了问题。当我搜索时，我看到 this 制作条形以防止它们重叠的答案。

如您所见，问题出在边栏上。

这是HTML：

        <div class="row">
            <div class="col-md-2 bg-dark">
               <!-- sidebar -->
                <nav class="navbar navbar-light bg-dark" id="sidebar">
                    <ul class="navbar-nav mr-auto">
                        <div class="brand-panel">
                            <li class="nav-item active">
                                <a class="navbar-brand" href="{% url 'home' %}"><h5>Sentizer <small class="one" > Beta</small></h5></a>
                            </li>
                        </div>
                        <li class="nav-item active">
                            <a class="nav-link" href="{% url 'patients:dashboard' %}">Dashboard</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link" href="{% url 'patients:patients_list' %}">Patients</a>
                        </li>
                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'accounts:tickets' %}">Tickets</a>
                        </li>
                        <li class="nav-item">
                             <button type ="button" class="button1 nav-link" data-toggle="modal" data-target="#modalContactForm">Feedback</button>
                        </li>
                    </ul>
                </nav>
            </div><!-- sidebar -->

  <div class="col-md-10">
      <div class="row">
           <div class="col-md-12 px-0">
                       <!-- navbar -->
               <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="top-nav1" >
                    <div class="container-fluid">
                         <form class="form-inline" action="{% url 'patients:patient_search' %}" method="GET" >
                             <input class="form-control mr-sm-2" id="sebar" type="text" size="45%" placeholder="Search" aria-label="Search" name="q">
                             <button class="btn btn-outline-primary btn-sm" type="submit" ><i class="material-icons">search</i></button>
                         </form>
                         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                         </button>

                         <div class="collapse navbar-collapse" id="navbarSupportedContent">
                               <ul class="navbar-nav ml-auto">
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'about' %}">About us</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'faq' %}">FAQ</a>
                                    </li>
                                     <li class="nav-item">
                                     </li>
                                    {% if user.is_authenticated %}
                                    <li class="nav-item dropdown">
                                         <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">{{request.user.first_name}} {{request.user.last_name}}<b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li class="dropdown-item">
                                                <a class="nav-link" href=" {% url 'accounts:details' pk=request.user.pk %}">Profile</a>
                                            </li>
                                            <li class="dropdown-item text-nowrap">
                                                <a class="nav-link" href="{% url 'accounts:logout' %}">Sign out</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" id="searchtoggl"><i class="fa fa-search fa-lg"></i></a>
                                    </li>
                                    {% else %}
                                     <li class="nav-item text-nowrap">
                                         <a class="nav-link trigger-btn" href="#loginModal" data-toggle="modal">Login</a>
                                     </li>
                                    {% endif %}
                               </ul>
                                </div>
                            </div>
                        </nav>
                    </div><!-- navbar -->
                </div>

我尝试更改 <nav class="navbar navbar-light bg-dark" id="sidebar"> 的位置，但没有成功，因为它依赖于它之前的背景 div。

我该如何解决这个问题，是否有更好的方法来制作页面中的栏而不会出现任何重叠问题？

Answer 1

您需要使用 height: 100vh 将 'app container'（这里是您的第一个 div#app）扩展到屏幕高度。请在整页上试一下：

#app {
  height: 100vh;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div id="app" class="row">
  <div class="col-md-2 bg-dark">
    <!-- sidebar -->
    <nav class="navbar navbar-light bg-dark" id="sidebar">
      <ul class="navbar-nav mr-auto">
        <div class="brand-panel">
          <li class="nav-item active">
            <a class="navbar-brand" href="{% url 'home' %}">
              <h5>Sentizer <small class="one"> Beta</small></h5>
            </a>
          </li>
        </div>
        <li class="nav-item active">
          <a class="nav-link" href="{% url 'patients:dashboard' %}">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'patients:patients_list' %}">Patients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'accounts:tickets' %}">Tickets</a>
        </li>
        <li class="nav-item">
          <button type="button" class="button1 nav-link" data-toggle="modal" data-target="#modalContactForm">Feedback</button>
        </li>
      </ul>
    </nav>
  </div><!-- sidebar -->

  <div class="col-md-10">
    <div class="row">
      <div class="col-md-12 px-0">
        <!-- navbar -->
        <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="top-nav1">
          <div class="container-fluid">
            <form class="form-inline" action="{% url 'patients:patient_search' %}" method="GET">
              <input class="form-control mr-sm-2" id="sebar" type="text" size="45%" placeholder="Search" aria-label="Search" name="q">
              <button class="btn btn-outline-primary btn-sm" type="submit"><i class="material-icons">search</i></button>
            </form>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'about' %}">About us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'faq' %}">FAQ</a>
                </li>
                <li class="nav-item">
                </li>
                {% if user.is_authenticated %}
                <li class="nav-item dropdown">
                  <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">{{request.user.first_name}} {{request.user.last_name}}<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li class="dropdown-item">
                      <a class="nav-link" href=" {% url 'accounts:details' pk=request.user.pk %}">Profile</a>
                    </li>
                    <li class="dropdown-item text-nowrap">
                      <a class="nav-link" href="{% url 'accounts:logout' %}">Sign out</a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
                  <a href="#" id="searchtoggl"><i class="fa fa-search fa-lg"></i></a>
                </li>
                {% else %}
                <li class="nav-item text-nowrap">
                  <a class="nav-link trigger-btn" href="#loginModal" data-toggle="modal">Login</a>
                </li>
                {% endif %}
              </ul>
            </div>
          </div>
        </nav>
      </div><!-- navbar -->
    </div>

即使在多次更改定位后，侧边栏也不会延伸到整个页面？

Side bar isn't stretched to the whole page, even after changing the positioning multiple times?

html

css

navbar

twitter-bootstrap

bootstrap-4