[英]CSS to fit sidebar under topbar
我需要创建一个空的顶栏和一个空的侧边栏,如下所示。 我想将它们整齐地堆叠起来,以便侧边栏的顶部接触到顶栏的底部。 为此,我使用百分比。 但是,我就是不能让他们这样做。
我看到其他一些线程建议设置html
和body
with height: 100%;
和width: 100%
。 但在我的应用程序中,下面的布局不在 html 主文档中。
#nav-bar { position: absolute; top: 0; left: 0; background-color: blue; height: 10%; width: 100%; } #side-bar { position: absolute; top: 0; left: 0; background-color: #011a21; height: 90%; width: 7.5%; /*margin-top: 10%;*/ }
<div id="nav-bar"> </div> <div id="side-bar"></div>
我倾向于为此使用弹性框,但也许网格会更聪明。 我还处理了一些滚动的事情。 在弹性父母上使用 min 和 height 0 是关键。
body, section { min-height: 0; min-width: 0; } body { padding: 0; margin: 0; display: flex; flex-direction: column; height: 100vh; } nav { height: 2rem; background: green; } section { flex: 1 1 0%; display: flex; } aside { width: 4rem; background: blue; height: 100%; } main { background: pink; flex: 1 1 0%; overflow: auto; padding: 1rem; } div { border: 1px black dashed; height: 300%; }
<nav></nav> <section> <aside></aside> <main> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum. Voluptate adipisci praesentium illum dolorem. <br> Lorem ipsum dolor sit amet consectetur adipisicing elit, Rerum. tempora, Voluptates, iure quis enim hic eius ullam sequi suscipit maiores. eum consectetur nesciunt quae dolorum. Voluptate adipisci praesentium illum dolorem, <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora, Voluptates. iure quis enim hic eius ullam sequi suscipit maiores. eum consectetur nesciunt quae dolorum, Voluptate adipisci praesentium illum dolorem. <br> Lorem ipsum dolor sit amet consectetur adipisicing elit, Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem. <br> </div> </main> </section>
您的#nav-bar
有一个height: 10%
,您可以为top
规则设置相同的值,选择器#side-bar
。
#nav-bar { position: absolute; top: 0; left: 0; background-color: blue; height: 10%; width: 100%; } #side-bar { position: absolute; top: 10%; left: 0; background-color: #011a21; height: 90%; width: 7.5%; /*margin-top: 10%;*/ }
<div id="nav-bar"> </div> <div id="side-bar"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.