將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包裝。