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

Question

我一直在搜索整个上午，而找不到解决方案以解决特定问题。我有一个布局，其左列设置为大约50px，右列设置为占用页面的剩余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; 
}