滚动条不出现在2列流体宽度布局中 [英] Scrollbar not appearing in 2-column fluid width layout

问题描述

我使用2列div布局，其中左列和右列的宽度都是非确定性的。左列div保存图像。右边的div div下面有一个header div和一个文本内容div。左列图像的宽度优先于右列，右列以宽度方式获取碎片。这两列都在div容器内，它具有固定的高度（和宽度，但没关系）。此布局正在使用以下代码：

  .container {
 height：200px; 
 border：1px纯黑色; 
 overflow：hidden; 
} 
 .left {
 float：left; 
} 
 .right {
 overflow：hidden; 
} 
 .scrollable-content-header {
 font-size：25px; 
 border-bottom：1px纯黑色; 
} 
 .scrollable-content {
 font-size：18px; 
溢出：auto; 
 
  

如果文本内容div溢出容器高度，它应该可以滚动。但我无法让滚动条出现在 .scrollable-content 元素上。以下是一些HTML：

 < div class =container> 
 
< div class =left> 
< img id =imagesrc =http://www.webresourcesdepot.com/wp-content/uploads/image/css-icon.png/> 
< / div> 
 
< div class =right> 
< div class =scrollable-content-header> Lorem Ipsum< / div> 
< div class =scrollable-content> 
 Lorem ipsum dolor sit amet，consectetur ...等
< / div> 
< / div> 
 
< / div> 
  

如果容器元素具有 overflow：auto 而不是隐藏，然后会出现一个滚动条。但它将允许整个容器的滚动。我不希望这样，只有 .scrollable-content 应该可滚动，不包括标题。我假设为了实现流体宽度效果而在右列div上的 overflow：hidden 技巧会导致问题。

这是一个小提琴： http://jsfiddle.net/PJdNW/

任何帮助表示赞赏。

更新

据我所知，CSS无法弄清楚可滚动内容的高度是多少，所以为了使滚动条工作并且是正确的高度，需要设置可滚动内容的像素高度。

在我的情况中，整个容器的高度是动态的，所以我选择了一个JS解决方案，它获取整个容器的高度并减去可滚动内容标题，以便获得我需要的可滚动内容的像素值（加上一些微调即边距）。

我会暂时将这个问题留给我，希望我错了，CSS完成了任务。

解决方案

您必须设置容器的高度，否则容器将自动调整为内容长度。另外，设置overflow属性进行滚动。修正如下：

  .container {
 height：200px; 
 border：1px纯黑色; 
 overflow：hidden; 
} 
 .left {
 float：left; 
} 
 .right {
 overflow：hidden; 
} 
 .scrollable-content-header {
 font-size：25px; 
 border-bottom：1px纯黑色; 
} 
 .scrollable-content {
 font-size：18px; 
 overflow：scroll; 
 height：200px; 
 
  

更新的小提琴： http://jsfiddle.net/hdrenollet/PJdNW/1/

I'm using a 2-column div layout where the widths of both the left and right columns is non-deterministic. The left column div holds an image. The right column div holds a header div and a text content div below it. The width of the left column image takes precedence over the right column, and the right column gets the scraps in terms of width. Both of these columns are inside a div container, which has a fixed height (and width, but that doesn't matter). This layout is working using the following code:

.container {
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}
.left {
    float: left;
}
.right {
    overflow: hidden;
}
.scrollable-content-header {
    font-size: 25px;
    border-bottom: 1px solid black;
}
.scrollable-content {
    font-size: 18px;
    overflow: auto;
}

The text content div should be scrollable if it overflows the container height. But I can't get the scrollbar to appear on the .scrollable-content element. Here's some HTML:

<div class="container">

    <div class="left">
        <img id="image" src="http://www.webresourcesdepot.com/wp-content/uploads/image/css-icon.png"/>
    </div>

    <div class="right">
        <div class="scrollable-content-header">Lorem Ipsum</div>
        <div class="scrollable-content">
            Lorem ipsum dolor sit amet, consectetur... etc.
        </div>
    </div>

</div>

If the container element has overflow: auto instead of hidden, then a scrollbar will appear. But it will allow scrolling of the entire container. I don't want that, only the .scrollable-content should be scrollable, not including the header. I'm assuming that the overflow: hidden trick on the right column div in order to achieve the fluid width effect is causing problems.

Here's a fiddle: http://jsfiddle.net/PJdNW/
Any help is appreciated.

UPDATE
From what I understand, CSS cannot figure out what the height of the scrollable-content needs to be, so in order for the scrollbar to work and be the correct height, the pixel height of the scrollable-content needs to be set.

In my case, the height of the overall container is dynamic, so I opted for a JS solution, which gets the height of the overall container and subtracts the height of the scrollable-content header in order to get the pixel value I need for the scrollable-content (plus some fine-tuning i.e. margins).

I'll leave this question open for the moment in the hopes that I'm wrong and CSS is up to the task.

解决方案

You have to set the height of your container, otherwise the container will automatically resize to the content length. Also, set the overflow attribute to scroll. Fix below:

        .container {
            height: 200px;
            border: 1px solid black;
            overflow: hidden;
        }
        .left {
            float: left;
        }
        .right {
            overflow: hidden;
        }
        .scrollable-content-header {
            font-size: 25px;
            border-bottom: 1px solid black;
        }
        .scrollable-content {
            font-size: 18px;
            overflow: scroll;
            height:200px;
        }

Updated fiddle: http://jsfiddle.net/hdrenollet/PJdNW/1/

这篇关于滚动条不出现在2列流体宽度布局中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！