How to make a footer at the bottom of the page in dynamic rendering?

M

Michael2017-09-27 22:07:59

css

Michael, 2017-09-27 22:07:59

Hello, the bottom line is this.
The table on the page is redrawn using vue.js. The table is hidden on first load. After some manipulations, the table is rendered. The footer needs to be pressed to the bottom of the page, if done in standard ways, then the footer after rendering becomes above the table.
How to avoid this and how to make the footer always be at the bottom of the page, regardless of whether there is dynamic content or not?

Пример html:
<body>
    <div class="main">
        <div class="content">
        </div>
        <div class="table">
             Этот див рендерится динамически
        </div>
    </div>
    <div class="footer">
    </div>
</body>

html, body{
    height: 100%;
}
.main{
   height: 100%;
}
.footer{
    position: absolute;
    bottom: 0;
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Exploding, 2017-09-28
@Exploding

.main{
   height: calc(100% - 50px);
   overflow: auto;
}

50px is the height of the dark, damp basement

A

Andrey, 2018-01-11
@kvaak

Place the footer in main, remove the css that you wrote, and that's enough

<body>
    <div class="main">
        <div class="content">
        </div>
        <div class="table">
             Этот див рендерится динамически
        </div>
         <div class="footer">
         </div>
    </div>
</body>

.main {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.content and .table are also better wrapped in 1 div, but not necessarily