html - 填充未正确应用于 div 元素
问题描述
在叠加层中,我添加了一个滚动视图。在我尝试向滚动视图添加填充之前,一切正常。正确应用了顶部和左侧填充,但滚动视图内的文本超出了右侧和底部。这是我的代码
document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);
this.title_element.html('<ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> <ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> ');
function keyDownTextField(e) {
alert(document.getElementById('scrollviewwrapper').scrollTop);
var keyCode = e.keyCode;
if (keyCode == 38) {
// up arrow
} else if (keyCode == 40) {
// down arrow
}
}
.overlay {
position: absolute;
background: red;
height: 200px;
width: 500px;
top: 50px;
left: 20px;
bottom: 50px;
z-index: 100;
}
.scrollviewwrapper {
position: relative;
height: 200px;
width: 500px;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<html>
<body>
<div class="overlay">
<div class="scrollviewwrapper" id="scrollviewwrapper">
test
</div>
</div>
</body>
</html>
解决方案
将box-sizing:border-box;
规则添加到您的.scrollviewwrapper
班级:
document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);
this.title_element.html('<ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> <ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> ');
function keyDownTextField(e) {
alert(document.getElementById('scrollviewwrapper').scrollTop);
var keyCode = e.keyCode;
if(keyCode==38) {
// up arrow
} else if(keyCode==40) {
// down arrow
}
}
.overlay{
position: absolute;
background: red;
height: 200px;
width: 500px;
top: 50px;
left: 20px;
bottom : 50px;
z-index: 100;
}
.scrollviewwrapper{
position: relative;
height: 200px;
width: 500px;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
overflow:auto;
box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<html>
<body>
<div class="overlay">
<div class="scrollviewwrapper" id="scrollviewwrapper">
test
</div>
</div>
</body>
</html>
推荐阅读
- angular - 服务内的Angular 4调用函数
- php - 带有 PHP 的 HTML5 电子邮件表单不发送电子邮件
- r - 对标准误差 R 进行聚类时,不同的估计,相同的模型
- javascript - 试图找到正确的方法,但我找不到
- spring-boot - JSF 外部上下文 getRealPath 在基于连接面 jsf omnifaces 的应用程序中返回 null
- android - 将光标直接插入到 Android 中的表格中
- c++ - 使用指针反转数组
- vue.js - 在 VueJs 中处理大数据
- reactjs - JSX 元素类型“App”不是 JSX 元素的构造函数。“App”类型中缺少属性“上下文”
- java - java - 如何从现有的pdf中裁剪一部分并在java中创建一个新的pdf?