我正在嘗試使第二個引導行填充剩余的高度

Question

我正在構建一個連接到SQL數據庫的ASP.NET應用程序。 這是一個屏幕截圖：

我想要：

1）我的圖占用所有空白（即第二行的高度）

2）在圖表中添加填充，因此右側的完整日期將顯示

我一定看不到明顯的東西。 謝謝您的幫助！

這是我的代碼：

<!DOCTYPE html>

<html>
<head>
  <title></title>
    <link href="css/nv.d3.css" rel="stylesheet" type="text/css">
    <link href="Content/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/pikaday.css" rel="stylesheet" type="text/css" />
    <link href="css/theme.css" rel="stylesheet" type="text/css" />
    <link href="css/site.css" rel="stylesheet" type="text/css" />
    <script src="scripts/Pikaday/moment.js" type="text/javascript"  ></script>
    <script src="scripts/Pikaday/pikaday.js" type="text/javascript"></script>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/d3.min.js" charset="utf-8"></script>
    <script src="scripts/nv.d3.min.js"></script>

<style>
.singleLabel{
    min-height: 20px;
    text-align: left;
    font-size: large;
    margin-bottom:2px;
}
.textBox{
    border-left-width: 1px;
    min-height: 20px;
    text-align: center;
    font-size: large;
    margin-bottom:2px;
}
.textbox.dropDown{
    text-align: right;
}
text {
    font: 12px sans-serif;
}
    html, body, #chart, svg{
    margin: 0px;
    padding: 0px;
    height: 100%
    width: 100%;
}
.nv-x text{
    font-size: 20px;
}
.nv-y text{
    font-size: 20px;
}
.nv-series text {
    font-size: 20px;
}
.row {
    font-size: 30px;
}
.column{

}
</style>
</head>

<body>
   <form id="form1" runat="server">
   <div class="row">&emsp;Report from:&emsp;
   <asp:TextBox ID="startDate" runat="server" columns="6" style="border:1px solid #ff0000"></asp:TextBox>
   &emsp;To&emsp;
   <asp:TextBox ID="endDate" runat="server" columns="6" style="border:1px solid #ff0000"></asp:TextBox>
   &emsp;<input type="button" id="btGO" value="Go!" />


   <%-- Date picker for start and end --%>
   <script = "text/javascript">
      var picker = new Pikaday({
           field: document.getElementById("startDate"),
           firstDay: 1,
           format: "YYYY-MM-DD",
           minDate: new Date('2000-01-01'),
           maxDate: new Date('2020-12-31'),
           yearRange: [2000,2020],
           numberOfMonths: 2
      });
   </script>

    <script = "text/javascript">
      var picker = new Pikaday({
           field: document.getElementById("endDate"),
           firstDay: 1,
           format: "YYYY-MM-DD",
           minDate: new Date('2000-01-01'),
           maxDate: new Date('2020-12-31'),
           yearRange: [2000,2020],
           numberOfMonths: 2
      });
   </script>
</div>
<div class="row">
<div class="col-lg-12">
<div id="chart">
    <svg></svg>
</div>
</div>
</div>
<script>
    d3.json('https://cdn.rawgit.com/novus/nvd3.org/master/ghpages/stackedAreaData.json', function (data) {
        nv.addGraph(function () {
            var chart = nv.models.stackedAreaChart()
                          .x(function (d) { return d[0] })
                          .y(function (d) { return d[1] })
                          .clipEdge(true)
                          .useInteractiveGuideline(true);

            chart.xAxis
                .showMaxMin(true)
                .tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) });

            chart.yAxis
                .tickFormat(d3.format(',.0f'));

            d3.select('#chart svg')
              .datum(data)
                .transition().duration(500).call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
        });
    })
</script>
</form>

</body>
</html>

Answer 1

嘗試將高度設為固定值。 我認為<div id="chart">是要垂直占用空間的圖表嗎？

嘗試使用CSS：

div.chart {
    height: 80vh;
}

VH代表視口高度。 因此，這將占用您80％的屏幕高度。

對於行，您可以嘗試

padding: 0 10px;

或另一個值，只是您喜歡的填充。

Answer 2

您可以使用flexbox完成此操作。

這個小提琴中的 Flexbox示例

關鍵CSS：

#container{
  display: flex;
  flex-direction: column;
}
#graph{
  flex-grow: 1;
}

讓我知道這是否有幫助，或者您還有其他問題。 您還將希望包括此處顯示的前綴。

我正在嘗試使第二個引導行填充剩余的高度

問題描述

2 個解決方案

解決方案1
1 已采納 2016-07-05 18:56:04

解決方案2
1 2016-07-05 19:08:07

我正在嘗試使第二個引導行填充剩余的高度

問題描述

2 個解決方案

解決方案1 1 已采納 2016-07-05 18:56:04

解決方案2 1 2016-07-05 19:08:07

解決方案1
1 已采納 2016-07-05 18:56:04

解決方案2
1 2016-07-05 19:08:07