指定 div 恰好为 100% 高度

Question

我的问题如下：我的网站有 header、左侧导航和页脚（现在不在代码中）。 header 和左侧导航必须是静态的，只有页面的其余部分应该移动，这就是我开始将左侧导航菜单设置为 100% 宽度的原因。但是 height: 100%, 好像不行。

有人可以给我提示，或者有人知道我为什么会遇到这个问题吗？

编辑： 页脚下的 space 和左侧导航不应该存在。那是我截图的时候失败了。

代码：(index.php)

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="design.css">
    <title>Hardvision</title>
    <script src="https://kit.fontawesome.com/743ddd1f40.js" crossorigin="anonymous"></script>
</head>

<body>
<div class="wrapper">
<header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-2 logo">
                <a href="index.php"><img src="logo2.png" height="90px" width="90px"></a>
            </div>
            <nav class=" col-9 px-0">
                <div class="mainnav">
                    <ul class="px-0">
                        <li>
                            <a class="li" href="#">Lorem ipsum</a>
                        </li>
                        <li>
                            <a class="li" href="#">Lorem ipsum</a>
                        </li>

                        <li>
                            <a class="act" href="#">Lorem ipsum</a>
                        </li>


                        <li>
                            <a class="li" href="#"><i class="fas fa-user fa-lg"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</header>
<hr>


<main>
        <div class="leftnav">
            <nav>
                <div class="leftnavtable">
                    <li>
                        <p>Lorem ipsum</p>
                    </li>
                    <li>
                        <p>Lorem ipsum</p>
                    </li>
                    <li>
                        <p>Lorem ipsum</p>
                    </li>
                </div>
            </nav>
        </div>

    <div class="fullheight">
        <p>Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
    </div>

</main>

<footer>

</footer>

</div>
</body>

</html>

代码：(design.scss)

//variables
$defaultfont: Arial, sans-serif;
$defaultfontsize: 16px;
$gray1: #A9A9A9;
$gray2: #DDDDDD;
$break_small: 900px;
$break_large: 1170px;
$headerheight: 110px;

//general
html {
  font-size: $defaultfontsize;
  font-family: $defaultfont;
}

//tags
header {
  background-color: $gray1;
}

hr {
  border: none;
  height: 1px;
  background-color: #333;
  margin: 0px;
}

a {
  color: black;
}

//logo positioning
.container-fluid {
  .row {
    height: $headerheight;
  }
  .logo {
    padding: 10px 0px 0px 100px;
    @media screen and (max-width: $break_large) {
      padding: 10px 0px 0px 50px;
    }
    @media screen and (max-width: $break_small) {
      padding: 10px 0px 0px 40px;
    }
  }
}

//Header navigation
.mainnav {
  ul, li {
    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: flex-end;
    height: 70px;
  }
}

//whole page height exactly 100%
html, body, main, .leftnav, .leftnavtable, .fullheight {
  height: 100%;
  margin: 0;
  overflow: auto;
}

//Left navigation container
.leftnav {
  padding: 0;
  background-color: $gray2;
  display: flex;
  flex-flow: column;
  width: 250px;
  float: left;
}

//Left navigation
.leftnavtable {
  width: 250px;

  ul, li {
    list-style: none;
    padding: 40px 0px 0px 35px;
  }
}

//Text area
main .leftnav {
  float: left;
}

Answer 1

使用垂直高度

.leftnav {
    padding: 0;
    background-color: $gray2;
    display: flex;
    flex-flow: column;
    width: 250px;
    float: left;
    height: 100vh;
}

Answer 2

您需要在“vh”而不是“%”中设置高度。

但您还需要计算高度。请参见下面的示例

height: calc(100vh - header 高度); If header height = 100px;

.leftnav {
    height: calc(100vh - 100px);
}

Answer 3

假设导航栏的高度为 70px，页脚为 100px，边栏的宽度为 250px

.fullheight {
    height: calc(100vh -170px);
    width: calc(100vh - 250px);
    overflow:auto
}

Answer 4

同样值得一提的是，使用 flexbox CSS 构建布局让您可以更自由地使用自动收缩和增长的元素，而不是定义元素的高度和宽度。

这可以帮助您在未来更好地决定如何构建您的 HTML 模板。

我给你编码了一个简单的例子，并提供了你的截图。

在此处了解有关 flexbox 的更多信息： https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

header {
  height: 80px;
  background-color: grey;
}

.content-wrapper {
  display: flex;
  background-color: blue;
}

nav {
  background-color: aqua;
  min-width: 180px;
}

footer {
  background-color: red;
  padding: 20px;
}


/* misc styling */

header {
  padding: 20px;
}

header ul {
  list-style: none;
}

header ul li {
  display: inline;
  padding: 5px;
}

nav ul li {
  padding: 5px 0;
}

main section {
  padding: 20px;
}

p {
  margin: 0;
}

<header>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</header>
<div class="content-wrapper">
  <nav>
    <ul>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
    </ul>
  </nav>
  <main>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tellus et leo lacinia facilisis nec nec ante. Maecenas sed purus dictum, dignissim ex sit amet, pretium augue. Sed sed diam felis. Aliquam facilisis non nunc ac mattis. In eget
        magna ut mauris maximus tincidunt nec ac orci. Sed bibendum mauris erat, nec efficitur tortor aliquet non. Nulla facilisis velit nec nunc tincidunt aliquam. Phasellus et nisl sit amet lorem sodales volutpat. Vivamus mattis justo eu nulla tincidunt
        porta. Pellentesque sed urna finibus, vehicula nunc a, vehicula dui. Ut finibus lectus sed odio faucibus dignissim. Nullam egestas posuere porta. Morbi ac tellus imperdiet, fringilla ex a, tincidunt lacus. Nulla facilisi. Vestibulum ante ipsum
        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque at eleifend elit, in dignissim arcu. Mauris bibendum semper sagittis. Nullam quis ex sed velit porttitor tincidunt. Class aptent taciti sociosqu ad litora torquent
        per conubia nostra, per inceptos himenaeos. Vestibulum a convallis dolor. Aliquam in pharetra sem. Phasellus lobortis, diam vel convallis suscipit, nulla turpis pretium risus, sed dignissim tellus nunc vel enim. Fusce dignissim ante sit amet pulvinar
        gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In congue mattis fermentum. Duis blandit ornare egestas. Cras at fringilla sem, at aliquet metus. Integer ac lectus sit amet neque efficitur dictum
        in eu urna. Maecenas vulputate nec est vitae blandit. Sed aliquet posuere felis, ut tincidunt magna pharetra non. Maecenas facilisis pretium odio, tincidunt porttitor mauris feugiat vitae. Duis blandit quam non magna maximus dignissim non in tellus.
        Nam ligula leo, varius iaculis commodo sed, vestibulum sit amet orci. Etiam quis quam eros. In scelerisque vitae risus sed egestas. Proin fermentum venenatis ex et condimentum. Maecenas eu massa ut augue laoreet pharetra at ut mi. Nunc gravida
        est sed nibh eleifend condimentum.</p>
    </section>
    <footer>
      Here should be a Footer.
    </footer>
  </main>

</div>

指定 div 恰好为 100% 高度

Assign divs be exactly 100% height

html

css

height

sass