html - 如何做到这一点：具有固定宽度和可变宽度子元素的流体宽度父元素？

Question

在我解释之前，请考虑以下...

示例 HTML 代码：

<div id="Body">
    <div id="Content">...</div>
    <div id="Panel">...</div
</div>

代码：

#Body {
    min-width: 865px;
    width: 93%;
    max-width: 1785px;
}

#Panel {
    width: 250px;
    float: right;
}

#Content {
    float: left;
    min-width: 595px;
    width: /* This one needs to be fluid. So, what should I do? */;
    max-width: 1510px;
}

正如你所看到的，'Body' div 是我所指的流体宽度父级，具有固定宽度的子元素'Panel' div 和流体宽度'Content' div - 这正是我被卡住的地方。

我应该如何定义“内容”div的宽度？欢迎任何想法。谢谢。

Answer 1

首先放置#Paneldiv，然后简单地将其用于#Content：

#Content {
    margin-right: 250px;
}

jsFiddle 演示

---

以下是一些简单的指导方针，可以在您的网站上进行这项工作。我使用 Chrome 开发人员工具来完成这些工作，并且效果很好。

• #Body@style.css
  • overflow: hidden;
• #Content@custom.css
  • min-width: 595px;
  • width: 68%;
  • max-width: 1510px;
  • margin-right: 270px;
• #Content@style.css
  • width: 680px;
  • float: left;

Answer 2

此问题的修复方法是：

#Body {
    min-width: 865px;
    width: 93%;
    max-width: 1785px;
    position:relative; /* Added by me */
}

#Panel {
    width: 250px;
    /*float: right;*/
    position:absolute; /* Added */
    top:0; /* Added */
    right:0; /* Added */
}

#Content {
    float: left;
    min-width: 595px;
    width: 100%; /* Value added */
    max-width: 1510px;
    margin-right:250px; /* Added */
}

它对我来说很好。