divに未使用のスペースが残っているようにしました。私のデザインは、ヘッダー（50ピクセル）、フッタ（40ピクセル）、残りのスペースを取得したいコンテンツで構成されています。現時点ではcalc機能を使用していますが、かなり遅いと聞きましたが、あまり使用しないでください。残りのスペースに合わせてdivの高さを設定する方法
https://jsfiddle.net/md9cb24u/main-wrapperはjsfiddleでは何らかの理由で動作しません。
あなたは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>
と同じを得ることができます一部
.main-boxでページを包んとCSSを更新あなたは順番にjsfiddleにあなたの全体のコードをprodiveことができますあなたを助けること ？ –ただ更新しました。 – Dassin
重複 - https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 –