柔性设计的固定报头
柔性设计的固定报头
提问于 2020-12-28 14:24:21
我试图创建一个固定的头部与一个灵活的设计。但是，当我添加属性position: fixed时，下一个div不再位于标题之后，而是位于标题下面(我不想向它添加一个margin-top )
这是我的密码：
.wrapper{
display: flex;
background-color: red;
padding: 5px;
flex-direction: column;
min-height: 100vh;
}
.header_container{
background-color: grey;
position: fixed;
width: 100%;
}
.main_container{
display: flex;
background-color: #CB6115;
flex-grow: 1; //to use all the space of the screen
}<div class="wrapper">
<div class="header_container">header</div>
<div class="main_container">main</div>
</div>
我该加些什么才能使它合适呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-28 15:16:36
我将fixed更新为sticky，这将使其在滚动之前得到修正，直到它正常运行。
看看没有margin-top的代码，它运行得很好；
.wrapper{
display: flex;
background-color: red;
padding: 5px;
flex-direction: column;
min-height: 100vh;
}
.header_container{
background-color: grey;
position: sticky;
top: 0;
left: 0;
width: 100%;
}
.main_container{
display: flex;
background-color: #CB6115;
flex-grow: 1; //to use all the space of the screen
}<div class="wrapper">
<div class="header_container">header</div>
<div class="main_container">main</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65479127
复制相关文章
相似问题
腾讯云开发者
