HTML + CSS высота / поля / границы / отступы не складываются - PullRequest
Новая
       10

HTML + CSS высота / поля / границы / отступы не складываются

0 голосов
/ 30 августа 2018

Привет Stackoverflow!

У меня проблемы с точной настройкой пикселей. Вот кодовая ручка: https://codepen.io/anon/pen/NLbyag

Моя цель состоит в том, чтобы мои теги <svg> и <table id="time-h-axis"> могли горизонтально прокручиваться внутри родительского элемента <div id="main-charts">, но не вертикально. <svg> и <table id="time-h-axis"> имеют высоту 330 и 70, что делает высоту 400px <div id="main-charts">.

Однако, есть несколько дополнительных вертикальных пикселей откуда-то (можно прокрутить по вертикали и увидеть немного светло-зеленого цвета в div-коде) ... У меня нет идей ... Нужна помощь! Спасибо; -)

HTML: 

<div id="main-charts">            
  <table id="time-h-axis"><tr></tr></table>
  <svg height="330" width="11970"></svg>
</div>

CSS: 

#main-charts {
  width:1000px;
  height: 400px;
  background-color: lightgreen;
  margin: 0px;
  border: 0px;
  padding: 0px;
  overflow: scroll;

}

#time-h-axis {
  border-spacing: 0px;
  width: 11970px;
  height: 70px;
  background-color: violet;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#main-charts svg {
  background-color: red;
  margin: 0px;
  border: 0px;
  padding: 0px;
}

1 Ответ

0 голосов
/ 30 августа 2018

Установите SVG на display:block (для этого SO Q & A ) и упаковщик на overflow:auto

#main-charts {
  width: 1000px;
  height: 400px;
  background-color: lightgreen;
  margin: 0px;
  border: 0px;
  padding: 0px;
  overflow: auto;
}

#time-h-axis {
  border-spacing: 0px;
  width: 11970px;
  height: 70px;
  background-color: violet;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#main-charts svg {
  background-color: red;
  margin: 0px;
  border: 0px;
  padding: 0px;
  display: block;
}
<div id="main-charts">
  <table id="time-h-axis">
    <tr></tr>
  </table>
  <svg height="330" width="11970"></svg>
</div>

Демонстрация Codepen

...