时间戳

首页 > 解决方案 > 如何在 CSS 中没有任何内容的情况下设置 height=100%？

html - 如何在 CSS 中没有任何内容的情况下设置 height=100%？

问题描述

对不起我的英语......我想让侧边栏达到页面的 100% 高度。我设置了 html:100%，然后设置了 height:100%。但正如您在屏幕截图中看到的那样，侧边栏不起作用。并且高度等于其中内容的高度。

在此处输入图像描述

这是我为此编写的 CSS 代码。我还将视点用于侧边栏............

html {
    box-sizing: border-box;
    height: 100%;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body {
    font-family: Tahoma, sans-serif;
}

body p {
    font-family: 'Trebuchet MS', sans-serif;
}


.main {
    width: 80%;
    height: 100%;
    background-color: #243E36;
    color: #F1F7ED;
    float: left;
    position: relative;
}

header {
    text-align: center;
    margin: 20px auto;
    border-bottom: 2px solid #E0EEC6;
    width: 30%;
    padding-bottom: 15px;
}

header h1 {
    color: #C2A83E;
}

header p {
    margin-top: 10px;
    text-transform: uppercase;
    word-spacing: 10px;
    letter-spacing: 5px;
}

section {
    color: #212121;
    padding: 0 20px;
}

article {
    width: 50%;
    margin-bottom: 30px;
    float: left;
}

article h2 {
    padding: 15px;
}

article p {
    text-align: justify;
    padding: 0 15px;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #7CA982;
    text-align: center;
}

aside {
    width: 20%;
    min-height: 100%;
    max-height: 100%;
    background-color: #E0EEC6;
    float: left;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}
<body>
    <div class="container group">
        <div class="main">
            <!-- Header -->
            <header>
                <h1>My Personal NoteBook</h1>
                <p>Welcome to my page</p>
            </header>

            <!-- Notes -->
            <section class="group">
                <article>
                    <h2>Title 1</h2>
                    <p>Posted on 2020/07/23</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, sequi iusto! Facere, quos
                        tempore veritatis sit ratione iste perferendis quod possimus voluptatem, quam, non similique
                        labore quas adipisci corporis libero!</p>
                </article>
            </section>
            <!-- Footer -->
            <footer>
                <p>&copy;2020 My Nootbook</p>
            </footer>
        </div>

        <!-- Sidebar -->
        <aside style="height:100vh;">
            <h1>SideBar</h1>
        </aside>

    </div>
</body>

标签： htmlcss

解决方案

一种方法是在侧边栏 div 元素中使用内联 CSS

`

   <div class="sidenav" style="height:100vh;position: fixed;">
             <a href="#about">About</a>
             <a href="#services">Services</a>
             <a href="#clients">Clients</a>
             <a href="#contact">Contact</a>
            </div>"

` 我希望这个例子能给你一个更好的主意。

推荐阅读