使div的标题变粘，并占据div的宽度答案

【问题标题】：make the header of a div sticky, and take up the width of the div使div的标题变粘，并占据div的宽度
【发布时间】：2020-10-12 13:45:03
【问题描述】：

我正在尝试使标题在具有列表粘性或固定位置的 div 内，但它只粘在文本的宽度上，如果我将宽度扩大到 100%，它会占用页面的大小：

import styled from 'styled-components';

const ScrollableContainer = styled.div`
overflow-y: visible;
overflow-x: hidden;
height: 700px;
text-align: left;
justify-content: space-between;
cursor: auto;
`;

const TableHeader = styled.header`
position: fixed;
width: 100%;
height: 40px;
background-color: white;
z-index: 9;
line-height: 40px;
`;
export const TestView= () => {
     return (       
<ScrollableContainer>
            <TableHeader>
                Text here
            </TableHeader>
// some list goes 
       </ScrollableContainer >
)
};

我无法将宽度设置为一个值，因为 div 必须根据屏幕大小进行调整。

【问题讨论】：

position: sticky 怎么样？ developer.mozilla.org/en-US/docs/Web/CSS/position
尝试将父位置设置为 'position: relative'
谢谢，位置粘到页眉不起作用，并且 position: relative to parent div 将页眉的宽度拉伸到页面宽度，所以很遗憾它不适合 div盒子

标签： html css reactjs styled-components

【解决方案1】：

位置固定意味着它的位置是相对于视口的。将其宽度设置为 100% 确实会使其与视口（整个页面）一样宽。

您可以将position: inherit; 设置为继承其父级宽度。

const TableHeader = styled.header`
position: fixed;
width: inherit;
height: 40px;
background-color: white;
z-index: 9;
line-height: 40px;
`;

【讨论】：