为什么我的 div 没有保持在包装纸的高度？

Question

我想知道是否有人可以指出解决方案的方向！出于某种原因，我的 rightbar 的高度没有保持在父 div（mainwrapper）内，我将 body 和 wrapper 的高度设置为 100%。

当我将它设置为 90% 时它适合，但是当我将 window 调整为任何低于 1920x1080 的尺寸时，它再次从包装器中消失。

我们将不胜感激！

我在网上看到它通常是浮动 div 导致的，但我没有浮动，我相信我已经放置了正确的 position:relative。

我没有用 "bar" 来形容这个最好的措辞，所以这里有一张 gyazo 图片希望能对此有所帮助：https://gyazo.com/6661da9c5194e2c2619e5fe1b5e3f2c5 - 如您所见，当设为 100%

我的代码：

body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-image: url(/css/images/backgroundimages/bgimg.png);
}

div#mainwrapper {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-left: 4px solid #000;
border-right: 4px solid #000;
box-shadow: 0px 0px 10px #000;
background-color: rgba(0, 0, 0, 0.6);
}

div#menubar {
background-color: rgba(41, 128, 185, 0.2);
text-align: center;
padding: 30px;
border-bottom: 3px solid #000;
}

div#menubar a {
text-align: center;
padding: 31px;
text-decoration: none;
color: rgba(255, 255, 255, 1);
transition: 0.3s;
font-size: 1.1em;
font-family: 'Muli', sans-serif;
text-shadow: 2px 4px 7px #000;
}
div#menubar a:hover {
background-color: rgba(0, 0, 0, 0.4);
padding: 30px;
font-size: 1.3em;
transition: 0.3s;
color: rgba(231, 76, 60, 1.0);
text-shadow: 1px 1px 2px #000;
font-weight: bold;
border-right: 2px solid #000;
border-left: 2px solid #000;
}

div#maincontent {
width: 100%;
height: 100%;
}

div#rightbar {
width: 15%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}

<div id="mainwrapper">
    <div id="menubar">
        <a href="index.php">HOME</a>
        <a href="#">FRIENDS</a>
        <a href="#">FORUM</a>
        <a href="#">CONTACT</a>
    </div>
    <div id="maincontent">
        <div id="rightbar">
        
        </div>
    </div>
</div>

Answer 1

编辑： 尝试删除 div#rightbar 上的 height: 100%; 并将其替换为 min-height: calc(100vh - 85px);

推理：100vh 表示“100% 视口高度”。因此，无论您的浏览器 window 的高度是什么，高度 #rightbar 都会是。但是你需要从中减去#menubar的高度（85px）。 calc() 帮助您完成此任务。记下这个 css property/value 组合，因为您可能会经常使用它来使页脚紧贴页面底部（又名 'sticky footers'）。确保 - 符号两边都有 space。如果您不包括那些 spaces，calc() 功能将不起作用。

旧答案： ~~如果我不明白你想要什么，我深表歉意，但我会试一试：实际上 #rightbar 的身高在包装器内 - 它只是不在您围绕 #menubar 创建的边框内。~~

~~从 div#menubar 中删除 border-bottom: 4px solid #000;，并将其移至 div#mainwrapper。这是一个例子：https://jsfiddle.net/ms2e2e5v/1/~~

为什么我的 div 没有保持在包装纸的高度？

Why isn't my div staying in the wrapper's height?

html

css

wrapper