Question

我有一个固定元素锁定在页面底部，横跨窗口的整个宽度。在这个元素中有两个浮动元素（它们在实际代码中是固定的，但不在小提琴中）。最右边的元素具有固定的宽度，最左边的元素的宽度由css calc确定。最左边元素的子元素比它宽得多，但它不会导致溢出滚动条出现。

小提琴：http://jsfiddle.net/hMgR5/3/

现在，一种可能的解决方案是放弃本地浏览器对滚动的支持，并在查看元素的两侧添加我自己的滚动按钮，但我更愿意使用浏览器的本地滚动支持，如果可能的话，除非以这种方式完成的用户体验一直很差。

编辑：问题是子元素与固定位置元素具有相同的高度。因此，滚动条将在固定元素下方呈现，从而阻止用户与其进行交互。可能需要一个更精明的解决方案：可能取消浮动并转移到溢出元素末端的填充绝对定位可能会更好。

标记：

<div class="bottom-bar">
<div class="viewer">
    <ul class="list">
        <li class="element">Hello</li>
        <li class="element">World</li>
        <li class="element">Hello</li>
        <li class="element">World</li>
        <li class="element">Hello</li>
        <li class="element">World</li>
    </ul>
</div>
<div class="other-bar-item">
    Other Item
</div>

样式：

*{
box-sizing: border-box;
font-size: 1em;
font-weight: bold;
color: white;
}

.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #1a1a1a;
}

.other-bar-item{
float: left;
width: 200px;
text-align: center;
}

.viewer{
float: left;
width: calc(100% - 200px);
overflow-x: auto;
}

.list{
margin: 0;
padding: 0;
width: 2000px;
height: 40px;
}

.element{
list-style: none;
display: inline-block;
width: 200px;
height: 100%;
position: relative;
background-color: navy;
border-right: 2px solid white;
text-align: center;
}

Answer 1

这是链接：jsfiddle

您不必为ul设置高宽度

你可以设置white-space：nowrap;到父元素并为其子元素设置内联块显示。这将迫使父母根据需要加宽。

并且您不需要设置overflow：auto;因为父母会自动这样做。

这是代码：

.bottom-bar{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #1a1a1a;
    overflow-y: hidden;
    white-space: nowrap;

}

.other-bar-item{
    display: inline-block;
    width: 200px;
    text-align: center;
    background-color: red;
}

.viewer{
    display: inline-block;
}

.list{
    margin: 0;
    padding: 0;
    height: 40px;
}

.element{
    list-style: none;
    display: inline-block;
    width: 200px;
    height: 100%;
    position: relative;
    background-color: navy;
    border-right: 2px solid white;
    text-align: center;
}

Answer 2

在我的Mac上滚动条似乎显示在它自己，不知道为什么PC不同但是，为了让水平滚动条显示（但不是垂直），将以下内容添加到查看器类：

overflow-y: hidden;
height: 100%;

强制固定元素内的div水平滚动

2 个答案: