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

＆GT;

的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属性，并且被另一个已分配div属性的display: table包裹。

将div扩展到页面的末尾？

1 个答案: