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

Question

我整个上午一直在寻找，但我无法找到解决我具体问题的方法。我有一个布局，我有一个左列设置为约50px和一个右列设置为占用页面的剩余100％。这部分有效。

现在，在右栏中，我有另外两列布局。但由于容器的宽度是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;
}