如何在直到頁腳擴展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所以它是你的頭的確切高度。如果您使用開發人員工具進行此操作，則可以完美匹配它。