Question

我想知道是否有人能指出解决方案的方向！出于某种原因，我的右边栏的高度不在父div（mainwrapper）内，我的身体和包装的高度设置为100％。

当我将其设置为90％时，它适合但是当我将窗口调整为低于1920x1080的任何值时，它会再次从包装中退出。

任何和所有人都将不胜感激！

我在网上看到它通常是漂浮的div导致了这个，但我没有任何浮动，我相信我有正确的位置：相对位置。

我没有用最好的措辞＆＃34; bar＆＃34;，所以这里有一个gyazo图片，希望有助于此：https://gyazo.com/6661da9c5194e2c2619e5fe1b5e3f2c5 - 正如你所看到的，酒吧当设置为100％

时，它会脱离包装器

我的代码：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

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

推理：100vh表示＆＃39; 100％视口高度＆＃39;。因此，无论浏览器窗口的高度如何，高度#rightbar都将是。但是你需要从中减去#menubar的高度（85px）。 calc()帮助您实现这一目标。记下这个css属性/值组合，因为你可能会大量使用它来让你的页脚粘到页面底部（AKA＆＃39;粘性页脚＆＃39;）。确保-标志的两侧都有空格。如果您不包含这些空格，calc()功能将无效。

OLD ANSWER： ~~如果我不理解你想要什么，我道歉，但我会试一试：#rightbar＆＃39 ; s高度实际上位于包装器内部 - 它不在#menubar周围创建的边框内。~~

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

为什么我的div不能保持在包装器的高度？

1 个答案: