HTML+CSS height/margin/border/padding 不加起来
HTML+CSS height/margin/border/padding not adding up
问候 Whosebug!
我在设置标签时遇到像素完美问题。这是代码笔:https://codepen.io/anon/pen/NLbyag
我的目标是让我的 <svg>
和 <table id="time-h-axis">
标签在它们的 <div id="main-charts">
父标签内水平滚动,但不能垂直滚动。
<svg>
和 <table id="time-h-axis">
的高度分别为 330 和 70,这使得 <div id="main-charts">
.
的高度为 400px
但是,有一些额外的垂直像素来自某处(可以垂直滚动并在 codepen 中看到 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;
}
将 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>
问候 Whosebug!
我在设置标签时遇到像素完美问题。这是代码笔:https://codepen.io/anon/pen/NLbyag
我的目标是让我的 <svg>
和 <table id="time-h-axis">
标签在它们的 <div id="main-charts">
父标签内水平滚动,但不能垂直滚动。
<svg>
和 <table id="time-h-axis">
的高度分别为 330 和 70,这使得 <div id="main-charts">
.
但是,有一些额外的垂直像素来自某处(可以垂直滚动并在 codepen 中看到 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;
}
将 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>