如何设置div的高度以适合剩余空间

我试图让div有剩余的未使用空间的高度。我的设计包括标题（50像素），页脚（40像素）和内容，我想获得剩余空间。目前我正在使用calc功能，但是我听说它相当慢，我不应该使用它太多。如何设置div的高度以适合剩余空间

https://jsfiddle.net/md9cb24u/main-wrapper由于某种原因在jsfiddle中不起作用。

来源

2017-06-16 Dassin

你能prodive整个代码上的jsfiddle为了来帮你？ –

只是更新了它。 – Dassin

Duplicate - https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 –

裹在.main-box和更新CSS部分页面

你可以得到相同的与flex性能

.main-box { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
}

/* TAGS */ 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.main-box { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 

 
/* END OF TAGS */ 
 

 

 
/* WRAPPERS */ 
 

 
#wrapper-header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: url("background.png"); 
 
} 
 

 
#wrapper-main { 
 
    width: 100%; 
 
    height: calc(100% - (90px)); 
 
    background-color: green; 
 
} 
 

 
#wrapper-footer { 
 
    width: 100%; 
 
    height: 40px; 
 
    background-color: red; 
 
} 
 

 

 
/* END OF WRAPPERS */ 
 

 

 
/* CONTENT */ 
 

 
#menu { 
 
    width: 400px; 
 
    height: 100%; 
 
    list-style-type: none; 
 
    float: right; 
 
    margin-right: 50px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.menu-a { 
 
    text-decoration: none; 
 
    color: #FAFAFA; 
 
    width: 23%; 
 
    height: 50%; 
 
    background-color: #3B3B3B; 
 
    float: left; 
 
    margin: auto 0; 
 
    margin-right: 2%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-family: 'codropsicons', verdana; 
 
    font-weight: 600; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    border-radius: 2px; 
 
    -webkit-font-smoothing: antialiased; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 

 
.menu-a:hover, 
 
.menu-active { 
 
    background-color: #FAA732; 
 
} 
 

 
.menu-a:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.menu-li { 
 
    text-align: center; 
 
} 
 

 

 
/* END OF CONTENT*/ 
 

 

 
/* MEDIA QUERIES */ 
 

 
@media screen and (max-width: 1440px) {} 
 

 
@media screen and (max-width: 980px) {} 
 

 
@media screen and (max-width: 650px) {} 
 

 
@media screen and (max-width: 480px) {} 
 

 
@media screen and (max-width: 320px) {} 
 

 

 
/* END OF MEDIA QUERIES */ 
 

 

 
/* FONTS */ 
 

 
@font-face { 
 
    font-family: 'codropsicons'; 
 
    src: url('codropsicons.tff'); 
 
} 
 

 

 
/* END OF FONTS */

<body> 
 

 
    <div class="main-box"> 
 
    <div id="wrapper-header"> 
 
     <ul id="menu"> 
 
     <a class="menu-a menu-active" href="#"> 
 
      <li class="menu-li">O nas</li> 
 
     </a> 
 
     <a class="menu-a" href="#"> 
 
      <li class="menu-li">Oferta</li> 
 
     </a> 
 
     <a class="menu-a" href="#"> 
 
      <li class="menu-li">Galeria</li> 
 
     </a> 
 
     <a class="menu-a" href="#"> 
 
      <li class="menu-li">Kontakt</li> 
 
     </a> 
 
     </ul> 
 
    </div> 
 

 
    <div id="wrapper-main"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo, consequuntur odit illum est! Tenetur incidunt cumque, laborum delectus non numquam est placeat, animi sed temporibus, dignissimos voluptate eius quidem. 
 
    </div> 
 

 
    <div id="wrapper-footer"> 
 

 
    </div> 
 
    </div> 
 

 

 
</body>

来源

2017-06-16 12:10:06 LKG

如何设置div的高度以适合剩余空间

回答

相关问题