Question

我试图让div在高处有剩余未使用的空间。我的设计包括标题（50像素），页脚（40像素）和我希望获得剩余空间的内容。我目前正在使用calc功能，但我听说它很慢，我不应该使用它太多。

https://jsfiddle.net/md9cb24u/ main-wrapper在jsfiddle中因某种原因无法正常工作。

Answer 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>

设置div的高度以适应剩余空间的方法

1 个答案: