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

Question

So I have a webpage, whose structure at its core is:所以我有一个网页，其核心结构是：

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

CSS: CSS：

#left_container {
    width: 80%;
}

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

It looks like this:它看起来像这样：

As you can see, on the bottom of the page, there's this white space (you can see it clearly where the background color ends on the right side) and I don't understand where it's coming from.如您所见，在页面底部，有一个空白区域（您可以清楚地看到它在右侧结束背景颜色的位置），我不明白它来自哪里。 I'd like the right div to extend all the way to the bottom of the page, whereas now it almost looks like there a bottom margin, which there isn't.我希望正确的 div 一直延伸到页面底部，而现在它几乎看起来像有一个底部边距，但实际上没有。

Second point: you might be wondering why I have height: calc(100vh - 82px);第二点：你可能想知道为什么我有height: calc(100vh - 82px); on the right container: that was through trial and error.在正确的容器上：这是通过反复试验。 If I only set it to 100vh , a scrollbar appears as if the page was longer than it actually is.如果我只将其设置为100vh ，则会出现一个滚动条，就好像页面比实际长一样。 It looks like this:它看起来像这样：

I'm not sure why it does this, as to my understanding 100vh means 100% of the page height.我不知道为什么会这样，因为我的理解100vh意味着 100% 的页面高度。

Does anybody know a possible solution to these?有人知道这些可能的解决方案吗？

Here's the full html for the page: https://pastebin.com/j5QkGhBy (I took the html after it was rendered, as it's a Django template, so it contains dynamic content. This should give you an idea of how the whole structure looks). Here's the full html for the page: https://pastebin.com/j5QkGhBy (I took the html after it was rendered, as it's a Django template, so it contains dynamic content. This should give you an idea of how the whole structure看起来）。 Here's the full CSS too: https://pastebin.com/ZYCiga1K这里也是完整的 CSS： https://pastebin.com/ZYCiga1K

Answer 1

You could use grid design the layout of the container.您可以使用网格设计容器的布局。

HTML: 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: 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; }

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

问题描述

1 个解决方案

解决方案1
0 2020-07-21 11:49:38

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

问题描述

1 个解决方案

解决方案1 0 2020-07-21 11:49:38

解决方案1
0 2020-07-21 11:49:38