在网页上，我如何才能有一个滚动条只为某一部分？ [英] On a web page, how can i have a scroll bar just for a certain section?

问题描述

在获得

On the back of getting this question answered, I have a page that looks like this.

 <div style="white-space: nowrap;">
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
 </div>

This page if there are a lot of spans will not wrap and it will keep going horizontally on the page and give me a horizontal scroll bar. Inside each span i have a html table but i am not sure that is important for question.

This works well but i have an issue when one of the spans is really long vertically and the others are short because you have to scroll down vertically to actually see that you have the horizontal scroll bar. I am trying to figure out a way to solve this so the horizontal scroll bar is always visible on the page regardless of how vertically long a particular span section is.

As an example, if you take alook at trello (see screenshot below). If you have a really long section vertically it add a vertical scroll bar JUST on that section, so the whole page doesn't need to be scrolled down.

In my case inside each span is a html table. What is the recommended way of implementing a vertical scroll bar just for that table (and not the whole page)?

解决方案

You need a max-height and overflow-y on the interior elements, and you need to set sizes on the outer elements:

HTML

<div class="outer">
    <div class="inner">foo</div>
    <div class="inner">bar</div>
    <div class="inner">whatever</div>
</div>

CSS

.outer {
    border: 2px solid red;
    float:left;
    top:0;
    bottom:0;
    position:absolute;
}
.inner {
    max-height:100%;
    overflow-y:auto;
    border: 2px solid blue;
    width:30%;
    margin-right:2%;
    float:left;
}

Here's a working fiddle

这篇关于在网页上，我如何才能有一个滚动条只为某一部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！