javascript 在div内设置带徽标的标题和导航栏,宽度为:最大-适合窗口的内容

fkaflof6  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(100)

我有一个包含width: max-content的div,它包含所有内容,超出了窗口大小。
我想在这个.pageWrapper里面放另一个div .page-header,它应该在页面的左边有*徽标***,在右边有*菜单导航栏***。它应该是粘性的,这样当我向右水平滚动时,页眉的元素就保持粘性。
我的问题是,在这种情况下,“菜单导航栏”在页面上是不可见的,它们只在页面右侧的末尾,这超出了窗口的大小。
如何设置.page-header宽度,使“菜单导航栏”将停留在窗口的右边,并作出React(总是停留在右边,如果页面将被调整大小)?

<div class="pageWrapper">
    <div class="page-header">
            <div class="logoHeader"></div>
            <div class="nav"></div>
    </div>
    <div class="page-content">
        //.. some big table
    </div>
</div>

下面是它现在的样子的一些例子:
输入文件:https://jsfiddle.net/ku1jprbz/

lp0sw83n

lp0sw83n1#

如果你想让导航栏有屏幕宽度,你可以尝试使用vw作为宽度。

.pageWrapper {
    display: flex !important;
    flex-direction: column;
    width: 100vw;
    background-color: white;
}

希望这能帮上忙

相关问题