Question

我有一个包含多个项目的块。当我点击菜单项时，它突出显示并延伸到窗口的左边框。

我是在绝对定位的元素的帮助下完成的，并将宽度设置为1000px，但此选项不起作用。这个红色条应该以任何分辨率靠在窗口边缘。

HTML

<div class="flex-menu-area">
        <div class="container">
            <div class="flex-menu">
                <div class="left-flex-column">
                    <div class="flex-menu-select"><span>item 1</span></div>
                    <div class="flex-menu-select"><span>item 2</span></div>
                    <div class="flex-menu-select"><span>item 3</span></div>
                </div>
                <div class="right-left-column">
                    <div class="object"><span>item1content</span></div>
                    <div class="object"><span>item1content</span></div>
                    <div class="object"><span>item1content</span></div>
                    <div class="object"><span>item1content</span></div>
                    <div class="object"><span>item1content</span></div>
                </div>
            </div>
        </div>
    </div>

CSS

.flex-menu-area {
    background: #fff;
    width: 100%;
    height: 512px;
    .flex-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 100%;
        .left-flex-column {
            max-width: 256px;
            width: 100%;
            outline: 1px solid gray;
            height: 512px;
            .flex-menu-select {
                font-size: 20px;
                line-height: 26px;
                font-weight: 600;
                text-align: left;
                color: $text-color;
                padding-top: 43px;
                padding-bottom: 43px;
                max-width: 100%;
                border-bottom: 1px solid gray;
                position: relative;
                &:hover {
                    background: #ccc;
                    &:before {
                        position: absolute;
                        width: 1000px;
                        height: 100%;
                        content: "";
                        display: block;
                        top: 0px;
                        left: -1000px;
                        background: red;
                    }
                }

            }
        }
        .right-left-column {
            outline: 1px solid gray;
            height: 512px;
            width: 884px;
            background: #fff;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background: #eee;
            .object {
                outline: 1px solid red;
                font-size: 20px;
                line-height: 40px;
            }
        }
    }
}

解决方案：

&:before {
    position: absolute;
    width: 100vw;
    right: 0;
    height: 100%;
    content: "";
    display: block;
    top: 0px;
    background: #fff;
    z-index: -1;
}

Answer 1

将＆amp;：before的宽度值和左值设置为：

width: calc((100vw - 100%) /2);
left: calc(0 - ((100vw - 100%) /2));

我认为这应该会有所帮助，但我现在无法访问足够大的屏幕进行测试，所以如果我的计算结果略有偏差，我会道歉。

如何将所选菜单项拉伸到窗口的左边缘？

1 个答案: