Adjustable height of <footer> and dynamically reducing height of <content>-CodePudding

In container I have navbar, content (to display messages, fils up space beetween navbar and footer) and footer (with textarea and button). Footer is fixed to bottom of the page. Height of footer is rising (navbar direction) up to textarea{rows={6}} and at the same time content is getting smaller.

.container{
   position:relative;
   display: flex;
   flex-direction: column;
}
.navbar{
   // not important
}
.content{
   max-height: 74vh;
   height: auto;
   overflow: auto;
   overflow-x: hidden;
   flex-direction: column;
}
.footer{
   display: flex;
   position: fixed;
}

With that configuration footer height is riseing but content is not getting smaller at the same time. Somebody can help?

CodePudding user response：

You can give the min-height: 89vh; to the container by which footer will be placed ate the bottom and no need to use position: fixed; in footer..container{min-height: 89vh;}Please try this it may work.

CodePudding user response：

The footer is fixed and out of document flow. Which also means the height and width of the footer has no effect on the content.