将div扩展到页面的结尾？

Question

使用HTML/CSS我将如何设置

<div> 

等于页面的滞留者，如果有静态定义的div？

我有我的网站的一部分，这将是400px宽，无论什么，浮动左。我希望这个div填满右边的剩余空间。这是我谈论的内容，如果它没有意义。

http://gyazo.com/dd21a5566db57aa3fd1a7ea3a4f94207

我试过的东西

宽度：汽车， 和宽度：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包装。