html - 仅使用 css 即可调整列的滚动大小

Question

我正在尝试创建一个灵活的布局，其中包含不应换行的预格式化文本的列。我的问题是，仅当我将可滚动容器的宽度设置为具体宽度值时，列中的滚动条才会出现，% 似乎不起作用。如果我这样做，它周围的列仍然会随着浏览器窗口正确调整大小，但容器的宽度不会相应地改变，因为它是固定的。

这个优秀的教程对我创建列有很大帮助:http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks但它建立在可调整大小的内容之上。

有什么方法可以使用纯 CSS 调整滚动容器和列的大小吗？

Answer 1

我已经使用了 overflow:auto 但我的 float 对象总是占用与其内容一样多的空间。这导致列超出了屏幕尺寸。

我在这个问题中找到了答案: force a div to contain floated child divs

我基本上必须让我的容器包含 float 元素并防止它崩溃。 http://jsfiddle.net/zfsjb/1/

<style>
    #main {
    clear: both; /* Contain floating elements */
    background-color: red;
    }

    #main:after { /* Prevents the collapsing of the containing element. */
    content: ".";
    clear: both; /*  */
    display: block;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

    #primary {
    float: left;
    margin: 0;
    width: 20%;
    background-color: yellow;
    }
    #secondary {
    float: left;
    width: 80%;
    background-color: blue;
    }
</style>
<div id="main">
    <div id="primary">Primary</div>
    <div id="secondary">Secondary</div>
</div>