Html 引导4最小页面/边栏高度_Html_Css_Twitter Bootstrap_Bootstrap 4

Html 引导4最小页面/边栏高度

html css twitter-bootstrap bootstrap-4

Html 引导4最小页面/边栏高度,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我的代码如下所示： <div class="container-fluid"> <div class="row"> <nav>...</nav>  <main role="main">  </main> </div> </div>

我的代码如下所示：

<div class="container-fluid">
    <div class="row">
        <nav>...</nav> <!-- sidebar -->
        <main role="main">
            <!-- content -->
        </main>
    </div>
</div>

...

我试图设置最小高度，因为当内容太短时，侧边栏如下所示：

<div class="container-fluid">
    <div class="row">
        <nav>...</nav> <!-- sidebar -->
        <main role="main">
            <!-- content -->
        </main>
    </div>
</div>

请注意图像的白色底部是空的

将

html、body、.container fluid、.row

height设置为100%可修复此页面上的问题，但会断开内容超过100%的页面（侧边栏同样太短，但这次它（仅）是屏幕高度的100%）：

这是我滚动后的侧边栏，它不会超过100%

我希望边栏在内容短于屏幕时具有100%的高度，在内容长于屏幕时与内容一样高如何设置边栏（或.container流体）的最小高度？

nav{min height:100%；}

也不起作用。似乎min height在CSS3中的工作方式非常奇怪

JSFiddle:

您不需要添加任何额外的CSS，这个HTML工作得非常完美

HTML

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Dashboard</title>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <nav class="col-12 col-md-3 col-lg-2   navbar navbar-expand-md   navbar-dark bg-dark   pt-md-3 pl-md-2 pl-xl-3   d-md-block"> <!-- d-flex -->
          <a class="navbar-brand" href="#">
            <i class="fas fa-cog"></i> Administration
        </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
          <div class="navbar-collapse collapse mt-md-1" id="sidebar">
            <ul class="navbar-nav d-block mr-auto">
              <li class="nav-item w-100 btn btn-dark text-left">
                <a class="nav-link active" href="#">
                Dashboard <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item w-100 btn btn-dark text-left">
                <a class="nav-link" href="#">
                Orders
                </a>
              </li>
            </ul>
          </div>
        </nav>

        <main role="main" class="col-12 col-md-9 col-lg-10 px-4">
          some content
          <!-- when you uncomment code below, it works -->
           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>a
          lot of content
        </main>

      </div>

    </div>
  </body>

</html>

我通过从这个代码层复制代码修复了这个问题：

CSS:

HTML:

将
```
包装器
```
类添加到主
```
行
```
div

这是我的代码：

侧边栏的位置是否固定？能否分享一个实时代码示例？（codepen或jsfiddle）@yashummital当然，在解决这个问题之前，我也遇到了同样的问题，设置了正确的列高度：100vh，然后在它里面我放了一个可滚动的div，或者在你的例子中，你可以设置ul可滚动，所以它不'；当滚动时，t会影响侧栏，在这种情况下，您还可以使用height:100VH设置导航。它显示这与屏幕宽度无关。同样的问题：是的，这就是为什么你必须固定侧边栏的

位置的原因。但是当内容的高度超过100%时，高度：100vh
会使侧边栏太短。怎么可能呢，我在JSFIDLE中试过了，而且很早就开始工作了。如果你觉得舒服的话，你能和我共享你的本地服务器吗？这样我就可以从我的终端调试它了？