将div分配为高度的100％

问题描述 投票：1回答：4

我的问题如下：我有一个带有页眉，左侧导航和页脚的网站（目前不在代码中）。页眉和左侧导航必须是静态的，并且仅页面的其余部分应该移动，这就是为什么我开始将左侧导航菜单的宽度设置为100％。但是身高：100％，似乎不起作用。

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

Here is a link to a sceenshot with my idea how the page should look

edit：页脚下方的空间和左侧导航栏不应存在。这是我截取屏幕截图时的失败。

代码：（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;
}
html css sass height
4个回答
1
投票

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

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

height：calc（100vh-标头高度）;如果标头高度= 100px;

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

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

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

也很高兴知道，使用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>
1
投票

使用垂直高度

.leftnav {
    padding: 0;
    background-color: $gray2;
    display: flex;
    flex-flow: column;
    width: 250px;
    float: left;
    height: 100vh;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.