代码之家 › 专栏 › 技术社区 › Andrew Savinykh

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

css html

Andrew Savinykh · 技术社区 · 9 年前

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

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

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

控制 -这是一个狭窄的区域,允许清除、暂停和以其他方式控制图形。它还允许显示和隐藏日志区域。这意味着布局需要适应隐藏的日志区域。
传奇 -是一个 table 这将在图表上列出所有系列。它将显示序列颜色以及与序列关联的一些数字数据。如果图例中有更多行适合屏幕,则可以垂直滚动图例区域。该区域不需要水平滚动,假设它总是足够窄。这个 height “图例”(和“图形”)应占据“控制”区域和“日志”区域未使用的所有剩余空间。这个 width 传说将等同于自然 桌子 宽度 .
图表 -这里将有一个在HTML上绘制的图形 canvas 。这将在水平和垂直方向上占用所有可用空间。
日志 -这里将显示两三行日志。如果要显示的行数超过3行,则此区域应有一个垂直滚动条。这个区域需要能够隐藏。这个 身高 这个区域的面积可以被修复。(在 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

我面临的特殊问题:

为什么? 帆布 正在封闭外部呈现 div ? 这对我来说很奇怪,我不知道为什么。
我如何制作 桌子 自然地被隔开?特别地:
- 为什么第一行这么高?
- 我如何制作 桌子 不要全部拿走 身高 ? 是包围潜水 height:100% ,不是桌子,为什么它这么高?
- 如果它不适合 身高 ?
图例/图形区域似乎延伸到日志区域下方。为什么?我该如何预防?
最后,如何使日志区域具有固定高度并可滚动?

对不起,我知道这个问题很难回答,我会感激地接受任何帮助和/或建议。我确实意识到我缺乏基本的理解,但这正是我要努力克服的。今天晚上,我花了大部分时间研究这个话题,并寻找能够让我至少把这个不起作用的例子放在一起的来源。我对JavaScript很熟悉,我主要需要帮助的是HTML/CSS。我研究了关于不同DOM对象的属性的文档,但很难弄清楚什么要使用的属性以及如何使用。

2 回复 | 直到 9 年前

dippas 9 年前

你为了你想要的东西,把你的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>

JoannaFalkowska 9 年前

你的代码一团糟。以下是我尝试清理一下并实现您所描述的目标: https://jsfiddle.net/dckex2g7/

我假设顶栏和底栏的高度是固定的,这使得这个过程简单了一些。如果没有,你应该使用 display: flex; flex-direction: column 车身元件和 flex-grow: 1 内容。

请注意,我没有使用任何JS进行布局。要使其具有响应性,您应该使用最小宽度和媒体查询等功能。除非在flexbox不知何故没有涵盖的非常特殊的情况下,否则您几乎永远不需要JS来进行布局。

关于这个解决方案确实有很多需要描述的地方,所以如果你有任何具体的问题,可以直接问。