Question

我是一位经验丰富的.net开发人员，但我们所有人都有可以从改进中受益的领域。我觉得我严重缺乏HTML / CSS技能，而且我在这方面努力自学。

我正在尝试为监控本地网络带宽消耗的应用程序创建HTML布局。我设想布局由4个元素组成：

+--------------------------+
+ Controls                 +
+--------+-----------------+
+ Legend +  Graph          +
+        +                 +
+        +                 +
+        +                 +
+        +                 +
+--------+-----------------+
+ Log                      +
+--------------------------+

控件 - 这是一个允许清除，暂停和以其他方式控制图形的狭窄区域。它还允许显示和隐藏日志区域。这意味着布局需要适应隐藏的日志区域。
图例 - 是一个table，它会列出图表上的所有系列。它将显示系列颜色以及与该系列相关的一些数字数据。如果图例中有更多符合屏幕的线条，则应该可以垂直滚动图例区域。该区域从不需要水平滚动，因为它总是足够窄。图例（和图表）的height应占用控制区域和日志区域未使用的所有剩余空间。图例的width将等于自然table width。
图表 - 此处将在HTML canvas上绘制一个图表。这应该占据水平和垂直的所有可用空间。
日志 - 此处将显示两行或三行日志。如果要显示的行数超过3行，则此区域应该有一个垂直滚动条。这个区域需要能够隐藏起来。可以修复此区域的height。（在100px - 200px）附近。

布局应该适应窗口重新调整大小，并且当窗口变小时（在某种程度上）保持下降。除非窗口太小，否则它不应该有外部水平和垂直滚动条。

不幸的是，我无法在好几个地方做到这一点。

这是我的代码：

<html>
  <head>
    <style>
      * {margin:0;padding:0;height:100%;}
      html, button, input, select, textarea {
          font-family: sans-serif;
          font-weight: 100;
          letter-spacing: 0.01em;
      }
      .container {
        min-height:100%;
        position:relative;
      }
      .control {
          background:green;
          width:100%;
          height:auto;
          margin-top: 0;
      }
      .content {
        width:100%;
        margin:0;
        margin-top:0;
        margin-bottom:0;
      }
      .legend {
        position:relative;
        background:blue;
        float:left
      }
      .graph {
        background:red;

      }
      .log {
        background:yellow;
        width:100%;
        height:auto;
        position:absolute;
        margin-top: 0;
        margin-bottom: 0;
        bottom:0;
        left:0;
      }
      .table {
          border-collapse: collapse;
          border-spacing: 0;
          empty-cells: show;
          border: 1px solid #cbcbcb;
      }
      .table td,
      .table th {
          border-left: 1px solid #cbcbcb;
          border-width: 0 0 0 1px;
          font-size: inherit;
          margin: 0;
          overflow: visible;
          padding: 0.5em 1em; 
      }
      .table thead {
          background-color: #e0e0e0;
          color: #000;
          text-align: left;
          vertical-align: bottom;
      }
      .table td {
          background-color: transparent;
      }
      .table-odd td {
          background-color: #f2f2f2;
      }
    </style>  
  </head>
  <body>
    <div class="container">
      <div class="control">header1<br/>header2</div>
      <div class="content">
        <div class="legend">
          <table class="table">
              <thead>
                  <tr>
                      <th>#</th>
                      <th>Make</th>
                      <th>Model</th>
                      <th>Year</th>
                  </tr>
              </thead>
              <tbody>
                  <tr class="table-odd">
                      <td style="background-color: #FFB300">1</td>
                      <td>Honda</td>
                      <td>Accord</td>
                      <td>2009</td>
                  </tr>

                  <tr>
                      <td style="background-color: #803E75">2</td>
                      <td>Toyota</td>
                      <td>Camry</td>
                      <td>2012</td>
                  </tr>

                  <tr class="table-odd">
                      <td style="background-color: #FF6800">3</td>
                      <td>Hyundai</td>
                      <td>Elantra</td>
                      <td>2010</td>
                  </tr>

                  <tr>
                      <td style="background-color: #A6BDD7">4</td>
                      <td>Ford</td>
                      <td>Focus</td>
                      <td>2008</td>
                  </tr>

                  <tr class="table-odd">
                      <td style="background-color: #C10020">5</td>
                      <td>Nissan</td>
                      <td>Sentra</td>
                      <td>2011</td>
                  </tr>

                  <tr>
                      <td style="background-color: #CEA262">6</td>
                      <td>BMW</td>
                      <td>M3</td>
                      <td>2009</td>
                  </tr>

                  <tr class="table-odd">
                      <td style="background-color: #817066">7</td>
                      <td>Honda</td>
                      <td>Civic</td>
                      <td>2010</td>
                  </tr>

                  <tr>
                      <td style="background-color: #007D34">8</td>
                      <td>Kia</td>
                      <td>Soul</td>
                      <td>2010</td>
                  </tr>
              </tbody>
          </table>
        </div>
        <div class="graph"><canvas></canvas></div>
      </div>  
      <div class="log">log1<br/>log2</div>
    </div>
    <script>
      function resize() {
        var canvas = document.querySelector('canvas');
        canvas.style.width = '100%';
        canvas.style.height = '100%';
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
        ctx = canvas.getContext('2d');
        ctx.strokeStyle='yellow';
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(canvas.width,canvas.height);
        ctx.stroke();
        }
      resize();
      window.addEventListener('resize', resize, false);
    </script>
  </body>
</html>

这是相应的JSFiddle

我面临的特殊问题：

为什么canvas在封闭的div之外呈现？这对我来说非常令人惊讶，我无法弄清楚原因。
如何使table自然间隔？特别是：
- 为什么第一线太高了？
- 如何让table不接受整个height？它封闭的潜水有height:100%，而不是桌子，所以它为什么这么高？
- 如果它不适合height？
图例/图表区域似乎在日志区域下方延伸。为什么？我该如何预防？
最后，如何将Log区域设为固定高度并可滚动？

道歉，我知道这个问题是一个很高的要求，我会非常感激地接受任何帮助和/或指示。我确实意识到我缺乏基本的理解，但这就是我试图反对的东西。我今天晚上大部分时间都在研究这个主题，并寻找能够让我至少把这个非工作的例子放在一起的来源。我对JavaScript很感到满意，我主要需要帮助的是HTML / CSS。我研究了不同DOM对象的属性的文档，但很难弄清楚要使用的属性以及如何使用。

Answer 1

你正在为你想要的东西复杂化你的CSS，

您可以将CSS Flexbox与CSS calc()一起用于此

body {
  margin: 0
}
section {
  background: red;
  height: 50px;
}
article {
  display: flex;
  height: calc(100vh - 100px)
}
aside,
div {
  background: lightblue;
}
aside {
  overflow-y: auto;
  max-width: 45%
}
aside ~ div {
  flex: 1
}
canvas {
  width: 100%;
  height: 100%;
  background: green
}
.table {
  display: table;
  table-layout:fixed;
  width:100%
}
.row {
  display: table-row;
  background-color: #fff;
}
.column {
  display: table-cell;
  vertical-align: top;
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
  font-size: inherit;
  margin: 0;
  padding: 0.5em 1em;
  background-color: inherit;
}
.cell-header {
  font-weight: bold;
}
.row-odd {
  background-color: #f2f2f2;
}

<main>
  <section>Controls</section>
  <article>
    <aside>
      <div class="table">
        <div class="row row-odd">
          <div class="column cell-header">#</div>
          <div class="column cell-header">Make</div>
          <div class="column cell-header">Model</div>
          <div class="column cell-header">Year</div>
        </div>
        <div class="row">
          <div class="column" style="background-color: #FFB300">1</div>
          <div class="column">Honda</div>
          <div class="column">Accord</div>
          <div class="column">2009</div>
        </div>
        <div class="row row-odd">
          <div class="column" style="background-color: #803E75">2</div>
          <div class="column">Toyota</div>
          <div class="column">Camry</div>
          <div class="column">2012</div>
        </div>
        <div class="row">
          <div class="column" style="background-color: #FF6800">3</div>
          <div class="column">Hyundai</div>
          <div class="column">Elantra</div>
          <div class="column">2010</div>
        </div>
        <div class="row row-odd">
          <div class="column" style="background-color: #A6BDD7">4</div>
          <div class="column">Ford</div>
          <div class="column">Focus</div>
          <div class="column">2008</div>
        </div>
        <div class="row">
          <div class="column" style="background-color: #C10020">5</div>
          <div class="column">Nissan</div>
          <div class="column">Sentra</div>
          <div class="column">2011</div>
        </div>
        <div class="row row-odd">
          <div class="column" style="background-color: #CEA262">6</div>
          <div class="column">BMW</div>
          <div class="column">M3</div>
          <div class="column">2009</div>
        </div>
        <div class="row">
          <div class="column" style="background-color: #817066">7</div>
          <div class="column">Honda</div>
          <div class="column">Civic</div>
          <div class="column">2010</div>
        </div>
        <div class="row row-odd">
          <div class="column" style="background-color: #007D34">8</div>
          <div class="column">Kia</div>
          <div class="column">Soul</div>
          <div class="column">2010</div>
        </div>
      </div>
    </aside>
    <div>
      <canvas width="985" height="223"></canvas>
    </div>
  </article>
  <section>Log</section>
</main>

Answer 2

你的代码很糟糕。以下是我尝试清理它并实现您所描述的内容：https://jsfiddle.net/dckex2g7/

我认为顶部和底部的条具有固定的高度，这使得这更简单。如果他们不这样做，您应该在body元素上使用display: flex; flex-direction: column，在.content上使用flex-grow: 1。

请注意我没有使用任何JS进行布局。要使其响应，您应该使用最小宽度和媒体查询等内容。你几乎不需要JS进行布局，除非在极少数非常特殊的情况下，某些情况不会被flexbox覆盖。

关于这个解决方案真的有很多描述，所以如果你有任何具体的问题请求。

如何填充剩余的高度和宽度？

2 个答案: