v4 bootstrap full height sidebar

前端 未结 4 659
别那么骄傲
别那么骄傲 2021-01-18 04:25

I using the latest version of bootstrap and my siderbar is too short and not full height.
You can view it from here: http://srv.sniperjum.com/sh1omi/bootstrap-dev/
C

相关标签:
4条回答
  • 2021-01-18 04:36

    Bootstrap 4 has changed since this question was asked, but you can make the sidebar full height using min-height..

    .sidebar{
        background-color: #f5f5f5;
        padding-right: 20px;
        padding-top: 20px;
        min-height: calc(100vh - 50px);
    }
    

    http://www.codeply.com/go/oiByWVrIbe (Bootstrap 4 alpha 6)


    Update Bootstrap 4.1

    Flexbox can be used to allow the container and its child divs (row, col and sidebar) to fill height...

    https://www.codeply.com/go/fz2R7nUwue


    Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?

    0 讨论(0)
  • 2021-01-18 04:36
    .sidebar{ 
     position: absolute; 
     width: 250px; 
     height: 100%; }
    

    The height attribute is used to set the height of the sidebar.

    For a full length side-bar a value of 100% is to be given. For a half screen length a value of 50% is given So on and so forth.

    This should help.

    0 讨论(0)
  • 2021-01-18 04:36

    You can try this instead of yours

    remove these two bootstrap cols
    <div class="col-sm-3 col-md-2 sidebar" id="Navbar"> If you use this cols the position of the property will be relative i think it's better to remove those cols and use this css.

      width: 210px;
      height: 100%;
      position: fixed;
    
    0 讨论(0)
  • 2021-01-18 04:50

    The easier way is to do something like that:

    .sidebar {
        height: calc(100vh - 54px); /* 54 pixel is the height of your .navbar */
    }
    
    0 讨论(0)
提交回复
热议问题