发表新帖
发表新帖

Set max-height to fill all the available space

后端 未结
关注
1 1438
花落未央
花落未央 2021-01-22 14:40

My web application has some areas placed in the page. Basically:
相关标签:
1条回答
  • 时光取名叫无心
    2021-01-22 15:25

    I think you'd want to use flexbox for this...

    <body class="vh-100 d-flex flex-column overflow-hidden">
  <nav>       <-- top nav bar -->
  <ol>        <-- breadcrumb -->
  <div>       <-- row with buttons -->
  <div class="overflow-auto">
    <table>   <-- run-time growing table -->
  </div>
  <footer class="mt-auto">    <-- sticky footer -->
</body>
    • vh-100 - makes the entire body viewport height
    • d-flex flex-column - make the body display:flex, flex-direction:column
    • overflow-hidden - prevents the body from scrolling
    • mt-auto - to make the footer stick the the bottom

    Demo: https://www.codeply.com/go/FSrBOdRVFG

    Basically this has been answered before: Bootstrap 4 row fill remaining height
    How to make the row stretch remaining height
    Bootstrap 4: Scrollable row, which fills remaining height

    0 讨论(0)
 看不清?
提交回复
热议问题