html - 将 div 扩展到页面末尾？

Question

使用 HTML/CSS 我将如何设置

<div>

是否等于页面的剩余部分，如果有静态定义的 div？

我网站的一部分将有 400 像素宽，无论如何，它会向左浮动。我想让这个 div 填满右边剩余的空间。这是我正在谈论的图像，如果它没有意义的话。

http://gyazo.com/dd21a5566db57aa3fd1a7ea3a4f94207

我试过类似的东西

宽度:自动， 而 width:100% 只占据了整个页面。

---

要求的代码:

echo '<div id="dashboard" class="clearfix">';
echo '<div class="dbspacer"><font style="padding-left: 2%">Account information</font></div>';
echo '<div class="dbinfobuffer">';
echo '<div class="dbwrap">';
echo '<div id="dbinfocontainer" style="padding-left: 2%">';
echo '<div class="numstatscontainer">';
echo '<ul class="numstatsblock">';
echo '<li>Account Balance:</br><font style="font-size: 32px; font-style:oblique;" color="#00CC00">$' . number_format($current_balance, 2) . '</font></br>-</li>';
echo '<li>Pending Balance:</br><font style="font-size: 32px; font-style:oblique;" color="#00CC00">$' . number_format($pending_balance, 2) . '</font></br>-</li>';
echo '</br>';
echo '<li>Monthly Sales:</br> ' . compareMonths(false, false, $this_month_sales, $last_month_sales). '</br>' . compareMonths(true, false, $this_month_sales, $last_month_sales) . '</li>';
echo '<li>Monthly Revenue:</br> ' . compareMonths(false, true, $this_month_revenue, $last_month_sales) . '</br>' . compareMonths(true, false, $this_month_revenue, $last_month_revenue) . '</li>';
echo '</br>';
echo '<li>Accumulative Sales:</br><font style="font-size: 32px; font-style:oblique;" color="#00CC00">$' . number_format($total_sales, 2) . '</font></br>-</li>';
echo '<li>Accumulative Revenue:</br><font style="font-size: 32px; font-style:oblique;" color="#00CC00">$' . number_format($total_revenue, 2) . '</font></br>-</li>';
echo '</div>'; // div - numstatscontainer
echo '<div class="graphcontainer">';
include_once 'get_chart.php';
echo '</div>'; // div - graphcontainer
echo '</div>'; // div - dbinfocontainer 
echo '</div>'; // div - dbwrap
echo '</div>'; // div - dbinfo buffer
echo '</div>'; // div - dashboard

?>

CSS:

.dbwrap {

display: table; 
    width: 100%;
}
.dbinfobuffer {
    width: 100%;
    border-top-color:#999;
    border-top-width: 2px;
    border-top-style: solid;
    padding-top: 1%;
    display: table-cell;
}
.graphcontainer {
    display: table-cell;
    float: left;
    height: 300px;
    border: 2px;
    border-style:dashed;
    border-color:#999;
    width: 100%;
}

Answer 1

您可以使用 display: table-cell 属性。这是我为您快速编写的示例:

#wrapper {
  display: table;
  width: 100%;
}
#one {
  display: table-cell;
  width: 400px;
  background: blue;
  height: 300px;
}
#two {
  display: table-cell;
  background: pink;
  height: 300px;
}

<div id="wrapper">
  <div id="one"></div>
  <div id="two"></div>
</div>

有两个 div，#one 和 #two。 #one 的宽度固定为 400px，而 #two 占据剩余空间。这两个 div 都被赋予了 display: table-cell 属性，并且它们被另一个被赋予了 display: table 的 div 包裹着> 属性(property)。