Я опытный разработчик .net, но у всех нас есть области, где мы можем извлечь выгоду из улучшений. Я чувствую, что мне не хватает навыков HTML/CSS, и я пытаюсь научить себя в этой области.Как заполнить оставшуюся высоту и ширину?
Я пытаюсь создать макет HTML для приложения, которое контролирует потребление полосы пропускания в локальной сети. Я предполагаю, макет как состоящие из 4-х элементов:
+--------------------------+
+ Controls +
+--------+-----------------+
+ Legend + Graph +
+ + +
+ + +
+ + +
+ + +
+--------+-----------------+
+ Log +
+--------------------------+
- управление - это узкая область, которая позволит ясно, сделать паузу и иным образом контролировать график. Это также позволит отображать и скрывать область журнала. Это означает, что в макете необходимо скрыть область журнала.
- Legend - есть
table, в котором будут перечислены все серии на графике. Он будет показывать цвет серии, а также некоторые числовые данные, связанные с серией. Если в легенде есть больше строк, которые соответствуют экрану, должна быть возможность вертикальной области легенды прокрутки. Горизонтальная прокрутка никогда не требуется для области, где предполагается, что она всегда достаточно узкая.heightЛегенды (и графика) должны занимать все оставшееся пространство, которое не используется в области управления и области журнала. Обозначениеwidthлегенды будет равно натуральномуtablewidth. - График - там будет график, нарисованный над HTML
canvas. Это должно занимать все свободное пространство как по горизонтали, так и по вертикали. - Журнал - здесь будут отображаться две или три строки журнала. Если отображается более трех строк, в этой области должна быть вертикальная полоса прокрутки. Эта область должна быть способна скрываться.
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?
- Область «Легенда/График», по-видимому, простирается под зоной журнала. Зачем? Как я могу это предотвратить?
- Наконец, как я могу сделать область журнала фиксированной высоты и прокрутки?
Мои извинения, я знаю, что этот вопрос - это высокий порядок, я с благодарностью принимаю любую помощь и/или указатели. Я понимаю, что мне не хватает базового понимания, но с этим я пытаюсь работать. Сегодня я провел большую часть вечера, исследуя эту тему и искал источник, который позволил мне собрать хотя бы этот нерабочий пример. Мне нравится JavaScript, это HTML/CSS, в котором мне в основном нужна помощь. Я изучил документацию о свойствах различных объектов DOM, но сложно определить , что свойства для использования и как.
вы смотрели в Flexbox для макетов страниц? –
Есть ли причина, по которой вы не используете flexbox? Похоже, вы сильно переделываете свой макет. Я бы посоветовал вообще не использовать HTML-таблицы, они непредсказуемы, и довольно сложно изменить поведение по умолчанию. Когда вы сомневаетесь, придерживайтесь divs. – Senthe
@ Senthe Согласно [this] (http://caniuse.com/#feat=flexbox), у flexbox много ошибок в IE11 и вообще не работает на предыдущих IE. Хотя я не собираюсь поддерживать все браузеры с самого начала, исключая IE, совершенно определенно то, чего я бы хотел избежать. Спасибо за отзыв о flexbox, хотя, никогда не слышал об этом раньше, поэтому я кое-что узнал - я прочитаю об этом. –