如何填充剩余的高度和宽度？
[英]How to fill remaining height and width?
问题描述
I'm an experienced .net developer, but all of us have areas where we can benefit from improvements.
我是一位经验丰富的 .net 开发人员，但我们所有人都有可以从改进中受益的领域。 I feel that I'm severely lacking in HTML/CSS skills and I'm trying to teach myself in this area.我觉得我严重缺乏 HTML/CSS 技能，我正在尝试在这方面自学。
I'm trying to create an HTML layout for an application that monitors bandwidth consumption on the local network.我正在尝试为监控本地网络带宽消耗的应用程序创建 HTML 布局。 I envisage the layout as consisting of 4 elements:我将布局设想为由 4 个元素组成：
+--------------------------+
+ Controls +
+--------+-----------------+
+ Legend + Graph +
+ + +
+ + +
+ + +
+ + +
+--------+-----------------+
+ Log +
+--------------------------+
- Controls - this is a narrow area that will allow clear, pause and otherwise control the graph.控件- 这是一个狭窄的区域，允许清除、暂停和以其他方式控制图形。 It will also allow to show and hide log area.它还允许显示和隐藏日志区域。 This means that the layout need to accommodate the log area being hidden.这意味着布局需要容纳被隐藏的日志区域。
- Legend - is a
tablethat will list all series on the graph.图例- 是一个table，将列出图表上的所有系列。 It will show series color and also some numeric data associated with the series.它将显示系列颜色以及与系列相关的一些数字数据。 If there are more lines in the legend that fit the screen it should be possible to vertical scroll legend area.如果图例中有更多适合屏幕的行，则应该可以垂直滚动图例区域。 Horizontal scroll is never required for the area it's assumed that it is always narrow enough.假定它总是足够窄的区域从不需要水平滚动。 The heightof Legend (and Graph) should take up all the remaining space that is not used by Control area and Log area.Legend（和Graph）的height应该占据Control区和Log区没有使用的所有剩余空间。 Thewidthof the legend will be equal to the naturaltablewidth.图例的width将等于自然tablewidth。 - Graph - there will be a Graph here painted over HTML
canvas.Graph - 这里将有一个 Graph 绘制在 HTML canvas。 This should take up all available space both horizontally and vertically.这应该在水平和垂直方向上占用所有可用空间。 - Log - here will be two or three lines of log displayed.日志- 此处将显示两行或三行日志。 If there are more than 3 lines to display there should be a vertical scroll bar on this area.如果要显示的行数超过 3 行，则该区域应有一个垂直滚动条。 This area need to be able to be hid-able.该区域需要能够隐藏。 The
heightof this area can be made fixed.该区域的height可以固定。 (in the vicinity of100px-200px).（在100px-200px附近）。
The layout should adapt to window re-sizing, and keep looking descent when windows is being made small (to a point of course).布局应该适应窗口重新调整大小，并在窗口变小时保持下降（当然到一定程度）。 Unless the window is too small, it should not have outer horizontal and vertical scrollbars.除非窗口太小，否则不应有外部水平和垂直滚动条。
Unfortunately, I cannot get it right in several places.不幸的是，我在几个地方都做对了。
This is my code:这是我的代码：
<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>
This is the corresponding JSFiddle这是对应的JSFiddle
Particular problems that I'm facing:我面临的具体问题：
- Why
canvasis being rendered outside of the enclosingdiv?为什么canvas在封闭的div之外呈现？ This is very surprising to me and I cannot figure out why.这对我来说非常令人惊讶，我无法弄清楚为什么。 - How do I make the
tablebe spaced out naturally?如何让table自然地间隔开？ In particular:特别是：
- Why first line is so tall?为什么第一行这么高？
- How do I make the
tabledo not take the wholeheight?如何让table不占整个height？ It's enclosing dive that hasheight:100%, not the table, so why is it so tall?它是封闭的具有height:100%潜水，而不是桌子，为什么它这么高？ - How do I make it scroll-able if it's does not fit in the
height?如果它不适合height如何使其可滚动？
- Why first line is so tall?
- The Legend/Graph area seems to extend underneath the Log area.图例/图形区域似乎延伸到日志区域下方。 Why?为什么？ How do I prevent that?我该如何防止？
- Finally, how can I make the Log area of fixed height and scroll-able?最后，如何使 Log 区域具有固定高度且可滚动？
My apologies, I know that this question is a tall order, I'll gratefully accept any help and/or pointers.我很抱歉，我知道这个问题是一项艰巨的任务，我将感激地接受任何帮助和/或指点。 I do realize that I lack basic understanding, but that's what I'm trying to work against.我确实意识到我缺乏基本的理解，但这就是我试图反对的。 I spent most of the evening today researching this topic and looking for source that allowed me to put together at least this non-working example.我今天晚上的大部分时间都在研究这个主题，并寻找可以让我至少将这个非工作示例组合在一起的来源。 I'm comfortable with JavaScript, it's HTML/CSS that I mainly need help with.我对 JavaScript 很熟悉，我主要需要帮助的是 HTML/CSS。 I studied the documentation on what properties of different DOM objects do, but it's difficult to figure out what properties to use and how.我研究了有关不同 DOM 对象的哪些属性的文档，但很难弄清楚要使用哪些属性以及如何使用。
2 个解决方案
解决方案1
1 已采纳 2016-05-06 14:22:27
You are complicating your CSS a lot for what you want,你正在为你想要的东西复杂化你的 CSS，
you can use CSS Flexbox along with CSS calc() for this CSS Flexbox ，您可以使用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>
解决方案2
0 2016-05-06 14:13:47
Well your code is a mess.那么你的代码是一团糟。 Here is my attempt to clean it a bit and achieve what you described: https://jsfiddle.net/dckex2g7/这是我尝试清理它并实现您所描述的： https : //jsfiddle.net/dckex2g7/
I assumed that top and bottom bars have fixed height which makes this a bit simpler.我假设顶部和底部栏具有固定的高度，这使得这更简单一些。 If they don't, you should use display: flex; flex-direction: column如果没有，你应该使用display: flex; flex-direction: column display: flex; flex-direction: column on body element and flex-grow: 1 on .content. display: flex; flex-direction: column body 元素上的display: flex; flex-direction: column和flex-grow: 1 on .content。
Notice how I haven't used any JS for layout.请注意我没有使用任何 JS 进行布局。 To make it responsive you should use things like min-width and media queries.为了使其具有响应性，您应该使用诸如 min-width 和媒体查询之类的东西。 You almost never need JS for layout unless in a very few very specific cases which are not covered by flexbox somehow.你几乎从不需要 JS 进行布局，除非在极少数非常特殊的情况下，而 flexbox 以某种方式没有涵盖。
There's really a lot to describe about this solution so if you have any specific question ask away.关于这个解决方案真的有很多要描述的，所以如果你有任何具体问题，请提出。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.