有不少人说使用inherit ,当然这是没用的。
还有不少人认为父级元素使用relative,子元素(fixed)的宽度设为100%就可以,这也是错误的。使用relative的观点是把absolute和fixed认为是一样的,其实不是。区别在于:
absolute定位是相对于最近的relative;fixed定位是相对于视口(viewport)!
有效的方法是通过javascript获取父级元素宽度,然后设置fixed宽度。下面是一个实际代码例子:
ts
// Set fixed toolbar width
const editorOutside = document.querySelector('.tiptap-editor-outside');
if (editorOutside) {
const width = editorOutside.clientWidth;
const toolbars = document.querySelectorAll('.tiptap-editor-outside .fixed-toolbar');
toolbars.forEach((toolbar) => {
(toolbar as HTMLElement).style.width = width + 'px';
});
}