如何在直到页脚扩展div的高度底部

Question

我有麻烦在这里我想与线性渐变该容器的颜色去，直到底部与页脚要坚持，不管它有该div容器或没有那么多的内容如果侧栏的内容多于容器，反之亦然。侧边栏没有来自父包装Div的颜色。在内容结束后，我还需要在底部粘贴页脚，以便在那里显示空白空间。

这里是我的代码：

CSS：

#pjesa-kryesore{ /*main wrapper */ 
    display:flex; 
    max-width: 98%; 
    margin:0px auto; 
} 


/* Permbajtja (container) */ 
#permbajtja{ 
    flex-grow:1; 
    background:-webkit-linear-gradient linear-gradient(#fff,#bdbdbd); 
    background:-o-linear-gradient linear-gradient(#fff,#bdbdbd); 
    background:-moz-linear-gradient linear-gradient(#fff,#bdbdbd); 
    background:linear-gradient(#fff,#bdbdbd); 

    font-family: Open Sans; 
    padding:30px; 

} 


/* Sidebar */ 
#sidebar-majtas{ 
    width:350px; 
    flex-shrink:0; 
} 

.menu{ 
    background:-webkit-linear-gradient linear-gradient(#5b91e9,#a0c3fb); 
    background:-o-linear-gradient linear-gradient(#5b91e9,#a0c3fb); 
    background:-moz-linear-gradient linear-gradient(#5b91e9,#a0c3fb); 
    background:linear-gradient(#5b91e9,#a0c3fb); 

    border-radius: 15px; 
    text-align: center; 
    font-family: Open Sans; 
    margin: -45px auto 15px auto; 
    padding: 20px 5px; 
    width: 270px; 
} 

.menu-btn{ 
    text-decoration: none; 
    color:#fff; 
    display: block; 
} 

.menu-btn:hover{ 
    color:#555; 
} 


/* Footeri */ 
#footer{ 
    position:absolute; 
    left:0px; 
    bottom:0px; 
} 

HTML：

<div id="pjesa-kryesore"> 
     <div id="sidebar-majtas"> 
      <div class="menu"> 
       <a href="index.html" class="menu-btn padding">Ballina 
       <br><span style="font-size:12px"> Informacionet ...</span> 
       </a> 
       <a href="#" class="menu-btn padding">Link 2 
       <br><span style="font-size:12px"> Informacionet ...</span></a> 
       <a href="#" class="menu-btn padding">Link 3 
       <br><span style="font-size:12px"> Informacionet ...</span></a> 
      </div> 
      </div>  
     <div id="permbajtja"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida, quam non consequat blandit, ligula elit dignissim sapien, et luctus eros arcu et purus. Donec efficitur mi in mi luctus gravida. Suspendisse magna eros, mollis at lobortis sollicitudin, pharetra ac arcu. Cras vitae dignissim nunc. Aliquam eu felis ut neque placerat accumsan vitae at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pellentesque venenatis hendrerit. Sed pretium eleifend lorem nec maximus. 

Morbi commodo lectus a nulla varius faucibus. Morbi id turpis sed odio pretium tincidunt. Nullam a elit id turpis commodo interdum at a nunc. Nam imperdiet dictum tortor. Pellentesque eu molestie tortor. Vivamus sit amet dolor posuere, tristique libero id, aliquam dui. Aliquam elit nulla, pellentesque quis magna eu, imperdiet lobortis nibh. Donec et egestas ante, eget porttitor nisi. Integer porttitor luctus justo. 
     </div> 
    </div> 
    <div id="footer">(C) Copyrighr...</div> 

UPDATE：（媒体屏幕查询）

@media all and (max-width: 800px) { 

    #pjesa-kryesore { 
     flex-flow:column; 
    } 

    /* Make the sidebar take the entire width of the screen */ 

    #sidebar-majtas { 
     width:auto; 
    } 

} 

Answer 1

对于这样的问题，我更喜欢使用calc() CSS函数，以及vh的尺寸属性，该尺寸属性代表viewport height。

例如，给你的内容的样式：

height: calc(100vh - 300px); 

视（浏览器窗口）的100vh意味着100％的高度。

相应地更改300px所以它是你的头的确切高度。如果您使用开发人员工具进行此操作，则可以完美匹配它。