怎么做：一个流体宽度的父元素，具有固定宽度和流体宽度的子元素？

Question

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

示例HTML代码：

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

CSS代码：

#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和fluid-width'Content'div - 而这正是我被卡住的地方。

我应该如何定义'Content'div的宽度？欢迎任何想法。感谢。

Answer 1

首先放置#Panel div，然后将其用于#Content：

#Content {
    margin-right: 250px;
}

jsFiddle Demo

---

以下是一些简单的指南，可以在您的网站上进行此操作。我使用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 */
}

它对我来说很好。