title: I am trying to make the second bootstrap row fill the remaining height
body: <p>I am building an ASP.NET app that connects to a SQL database. Here is a screen shot: </p>
  
  <p><a href="https://i.stack.imgur.com/ZmJ9W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZmJ9W.png" alt="enter image description here"></a></p>
  
  <p>I would like:</p>
  
  <p>1) My graph to take all the blank space (i.e. second row height)</p>
  
  <p>2) Add padding to the graph, so the date on the right full shows</p>
  
  <p>I must not see the obvious. Thank you for your help!</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
      &lt;link href="css/nv.d3.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="Content/bootstrap.min.css" rel="stylesheet"/&gt;
      &lt;link href="css/pikaday.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="css/theme.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="css/site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="scripts/Pikaday/moment.js" type="text/javascript"  &gt;&lt;/script&gt;
      &lt;script src="scripts/Pikaday/pikaday.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="scripts/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/d3.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="scripts/nv.d3.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  .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{
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;form id="form1" runat="server"&gt;
     &lt;div class="row"&gt;&amp;emsp;Report from:&amp;emsp;
     &lt;asp:TextBox ID="startDate" runat="server" columns="6" style="border:1px solid #ff0000"&gt;&lt;/asp:TextBox&gt;
     &amp;emsp;To&amp;emsp;
     &lt;asp:TextBox ID="endDate" runat="server" columns="6" style="border:1px solid #ff0000"&gt;&lt;/asp:TextBox&gt;
     &amp;emsp;&lt;input type="button" id="btGO" value="Go!" /&gt;
  
  
     &lt;%-- Date picker for start and end --%&gt;
     &lt;script = "text/javascript"&gt;
        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
        });
     &lt;/script&gt;
  
      &lt;script = "text/javascript"&gt;
        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
        });
     &lt;/script&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-lg-12"&gt;
  &lt;div id="chart"&gt;
      &lt;svg&gt;&lt;/svg&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      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;
          });
      })
  &lt;/script&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>