如何在导航栏上对齐div？
[英]How can I align div bellow off my navbar?
问题描述
I have a layout with a navbar and 4 divs. 
我有一个带有导航栏和4个div的布局。 The first div are cropped by navbar. 第一个div由navbar裁剪。 Anyone knows what can i do? 谁知道我该怎么办？
<body> <div id="app" class="flex-container"> <nav class="navbar default-layout p-0 fixed-top d-flex flex-row" style="height: 63px;"> <select id="region" onchange="initProcess();" style="position:absolute;background:#eaeaea;"> </select> <div style="width: calc(100% - 74px); padding-left: 74px; left: 0; text-align: center; color: #fff"> <img src="images/co-logo.png" style="width: 100px; margin-top: -6px"> <h4>Dashboards</h4> </div> <div class="navbar-menu-wrapper d-flex align-items-right"> <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-right" type="button" data-toggle="offcanvas"> <span class="mdi mdi-menu"></span> </button> </div> </nav> <div class="flex-item" style="background-color:red"></div> <div class="flex-item" style="background-color:blue"></div> <div class="flex-item" style="background-color:yellow"></div> <div class="flex-item" style="background-color:grey"></div> </div> </body>
3 个解决方案
解决方案1
2 已采纳 2019-05-09 15:08:50
You can easily add padding-top css property equals to height of the navbar. 您可以轻松添加padding-top css属性等于导航栏的高度。 in your case it'll be: 在你的情况下，它将是：
.flex-container {
padding-top: 63px;
}
解决方案2
1 2019-05-09 15:08:13
Since the navbar is set to position:fixed , it ignores the normal flow of elements. 由于导航栏设置为position:fixed ，它忽略了正常的元素流。 Other elements align below it because of this. 因此，其他元素在它下面对齐。 In this case just add margin-top: 63px; 在这种情况下，只需添加margin-top: 63px; to the first element and you're good to go(the 63px is the exact same height your navbar is). 到第一个元素，你很高兴（ 63px是你的导航栏完全相同的高度）。
解决方案3
1 2019-05-09 15:55:47
This css will work in your case: 这个css适用于你的情况：
body {
margin: 0;
padding: 0;
}
.flex-container {
position: relative;
padding-top: 100px;
}
.navbar {
position: fixed;
top: 0;
background: purple;
z-index: 1;
width: 100%;
}
.flex-item {
width: 100%;
height: 60px;
}
.flex-container .flex-item:first-of-type {
position: absolute;
top: 50px;
width: 100%;
height: 50px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.