向div添加了溢出Y滚动条,隐藏了我的x溢出

时间:2018-11-04 14:41:50

标签: css

我想向<div>添加滚动条。在x轴上,我要显示一个溢出。

但是当我在样式中添加overflow-y: auto时,它也会消除x溢出。

这里是一个示例:Jsfiddle

有没有办法做到这一点?

编辑

在此显示情况代码。我有一个侧边栏,可以打开/关闭。并且在关闭侧边栏时,按钮必须具有-margin才能可见。您可以在这里看到它的运行情况:Website with sidebar

        <div class="sidebar right">

            <!-- Sidebaredge with button to toggle -->  

            <div style="width: 100px; height: 50px; margin-top: 16px; margin-left: -100px; position: relative; font-size: 10px">

            <a href="#" class="sidebaropenclose" data-side="right"><div id="openclosebutton" class="open-close-button"></div></a>

            </div>

这是css文件中的代码:

    .sidebar.right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 20%;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #659DBD;
    box-shadow: 0px 0px 2px 0px #FFFFFF;
}

.sidebars > .sidebar {
    font-family: 'Josefin Slab', serif;
    position: fixed;
    color: white;
    font-size: 20px;
    text-align: left;
}

由于分辨率不同,我需要侧边栏可滚动,并且侧边栏必须显示打开关闭按钮。

1 个答案:

答案 0 :(得分:0)

为什么不只添加显式的x和y溢出?

overflow-y: auto;
overflow-x: visible;

我相信这是因为设置一个溢出方向仍然只设置了一个新的 block格式化上下文。这里是more info about it