时间戳

首页 > 解决方案 > ```高度：100vh```和页面底部的白色边距的意外行为

html - ```高度：100vh```和页面底部的白色边距的意外行为

问题描述

所以我有一个网页，其核心结构是：

<div id="left_container">
   <!-- lots of content here -->
</div>
<div id="right_container">
   <!-- lots of content here too -->
</div>

CSS：

#left_container {
    width: 80%;
}

#right_container {
    width: 19.5%;
    clear: both;
    display: inline-block;
    height: calc(100vh - 82px);
}

它看起来像这样：

如您所见，在页面底部，有一个空白区域（您可以清楚地看到它在右侧结束背景颜色的位置），我不明白它来自哪里。我希望正确的 div 一直延伸到页面底部，而现在它几乎看起来像有一个底部边距，但实际上没有。

第二点：您可能想知道为什么我height: calc(100vh - 82px);在正确的容器上：这是通过反复试验。如果我只将其设置为100vh，则会出现一个滚动条，就好像页面比实际长一样。它看起来像这样：

我不确定它为什么这样做，因为我的理解100vh是指 100% 的页面高度。

有人知道这些可能的解决方案吗？

这是页面的完整 html：https ://pastebin.com/j5QkGhBy （我在渲染后获取了 html，因为它是 Django 模板，所以它包含动态内容。这应该让您了解整个结构看起来）。这里也是完整的 CSS：https ://pastebin.com/ZYCiga1K

标签： htmlcssbootstrap-4

解决方案

您可以使用网格设计容器的布局。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page title</title>
        <link href="css/main.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div id="left_container">
                <!-- lots of content here -->
             </div>
             <div id="right_container">
                <!-- lots of content here too -->
             </div>
        </div>
    </body>
</html>

CSS：

* {
    margin: 0px;
    padding: 0px;
}

html, body, .container {
    width: 100%;
    height: 100%;
}

.container {
    display: grid;
    grid-template-columns: 80% 20%;
    grid-template-rows: auto;
}

#left_container {
    background-color: red;
}

#right_container {
    background-color: blue;
}

推荐阅读