html - 将 div 指定为 100% 高度

问题描述

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

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

编辑：页脚下的空间和左侧导航不应该在那里。这是我截屏时的失败。

代码：（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>

代码：（设计.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;
}

标签： htmlcsssassheight

html - 将 div 指定为 100% 高度

问题描述

解决方案

推荐阅读