更新问题链接 - Page break at random places in browser print
我的要求是我需要在该位置的“从顶部和底部的高度”的帮助下插入一个 HTML 元素。 我试图通过所附图片传达确切的要求。 因为我的动态高度的 HTML 页面会因情况而异。
如何使用 jQuery 来做到这一点？
【问题讨论】：
标签： javascript jquery html
如果您想将元素定位在特定位置，则将这些元素放在标记中的位置并不重要。可以使用 CSS 设置定位。例如，您可以使用：
.top {
position: absolute;
top: 100px;
}
.middle {
position: absolute;
top: 150px;
}
然后将类添加到您的 div 中。
您也可以使用响应式单位，例如百分比或视图高度（例如 10vh）。
【讨论】：
尝试改用CSS，这是一个有效的代码：
<html>
<head>
<style>
html,
body {
text-align: center;
}
#div1 {
margin: 100px 0px 0px 0px;
background-color:lightblue;
}
#div2 {
margin: 50px 0px 0px 0px;
background-color:orange;
}
#div3 {
margin: 100px 0px 50px 0px;
background-color:red;
}
</style>
</head>
<body>
<div id="div1">
<p>Test Div1</p>
</div>
<div id="div2">
<p>Test Div2</p>
</div>
<div id="div3">
<p>Test Div3</p>
</div>
</body>
</html>尝试使用响应式单元：
使用em 它是一个相对长度（相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同的渲染介质之间可以更好地缩放。）
2em 表示当前字体大小的 2 倍，因此他可以适应每个屏幕/浏览器等。
你也可以使用%单位比如margin: 50% 25% 100% 30%;
上面的例子表明：
链接到其他人CSS units
【讨论】：
看看这些功能
例如：
<body>
<script>
$( function() {
$("body").append("<div style='margin-top: 100px;'>Some div here</div><div style='margin-top:150px;'>div here</div><div style='margin-top:250px;margin-bottom:50px;'>some div here</div>");
});
</script>
</body>
【讨论】：