具有动态高度的固定导航栏后的容器
Container after fixed navbar with dynamic height
我有一个 header 具有动态高度 (min-height: 50px)。
当然可以高于50px。我想要一个容器,它的正下方有一些内容。
我可以用边距或其他格式来做到这一点吗?
您应该给容器一个等于固定导航栏高度的边距。但是由于导航栏的高度可能需要增加,我通常会根据需要通过媒体查询更改高度和容器边距。
你的意思是这样的吗?
body {
height: 500px;
background-image: linear-gradient(to bottom, #eee 0%, #000011 100%);
}
.header-container {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
}
.header {
min-height: 50px;
padding: 15px;
background-color: #72f072;
}
.header-container .header p,
.header-container .something p {
margin: 0px;
}
.header-container .something {
padding: 15px;
background-color: #fff;
}
<div class="header-container">
<div class="header">
<p>some content</p>
</div>
<div class="something">
<p>some other content</p>
</div>
</div>
获取页眉高度并使用 js 将边距顶部分配给内容 div。
var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';
我有一个 header 具有动态高度 (min-height: 50px)。
当然可以高于50px。我想要一个容器,它的正下方有一些内容。
我可以用边距或其他格式来做到这一点吗?
您应该给容器一个等于固定导航栏高度的边距。但是由于导航栏的高度可能需要增加,我通常会根据需要通过媒体查询更改高度和容器边距。
你的意思是这样的吗?
body {
height: 500px;
background-image: linear-gradient(to bottom, #eee 0%, #000011 100%);
}
.header-container {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
}
.header {
min-height: 50px;
padding: 15px;
background-color: #72f072;
}
.header-container .header p,
.header-container .something p {
margin: 0px;
}
.header-container .something {
padding: 15px;
background-color: #fff;
}
<div class="header-container">
<div class="header">
<p>some content</p>
</div>
<div class="something">
<p>some other content</p>
</div>
</div>
获取页眉高度并使用 js 将边距顶部分配给内容 div。
var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';