DIV 填充宽度为 100% 的容器的剩余宽度

Question

我整个上午都在搜索，但找不到针对我的具体问题的解决方案。我有一个布局，其中左栏设置为大约 50 像素，右栏设置为占据页面的剩余 100%。这部分有效。

现在，在右栏中，我有另一个 2 列布局。但由于容器的宽度是 100%，我的右内列不断扩大超过它的父级。我需要它来简单地填充剩余空间，类似于父布局。我用我的示例代码创建了一个 jsFiddle。

http://jsfiddle.net/87nb2/1/

如您所见，绿色的“图库”部分越过了其父项的右侧。这就是我要解决的问题。

Answer 1

你现在的方式，我认为你需要做的就是：

• 在#gallery 上，将width: 100% 更改为right: 0。
• 之所以可行，是因为一个元素可以同时具有left 和right 属性。

Live Demo

---

您可能还想将left 的值调整为50px，以避免切断一些左侧元素：

Live Demo

Answer 2

http://jsfiddle.net/87nb2/14/

#filmstrip_nav {
    float:left;
    height: 94%;
    width: 50px;
    background-color:red;
}

#gallery {
    overflow: auto;
    height: 94%;
    background-color: green;
    width: 100%
    float:left;
}