html - div 中的 CSS 边框不适合内容的高度
问题描述
我创建了一个带有 BORDER 属性的 CSS DIV 以适应窗口和内容的 100% 高度。当内容小于窗口高度时,它可以正常工作。但是,如果内容超过窗口高度,边框仍然只适合窗口高度。
我使用的代码如下:
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
.form {
position: relative;
top: 0;
bottom: 0;
box-sizing: border-box;
width: 520px;
height: 100%;
margin: 0 auto;
vertical-align: middle;
border: 1px solid blue !important;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius: 5px;
font-family: "Times New Roman", Georgia, Serif;
}
<div class="form"></div>
边框角快照如下
解决方案
它确实适用于min-height
. 你的问题是你在body
标签上设置了一个高度,这限制了你form
唯一的内容溢出你的盒子的大小。
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.form {
position: relative;
top: 0;
bottom: 0;
box-sizing: border-box;
width: 520px;
min-height: 100%;
margin: 0 auto;
vertical-align: middle;
border: 1px solid blue !important;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius: 5px;
font-family: "Times New Roman", Georgia, Serif;
}
<div class="form">
lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem
</div>
推荐阅读
- java - 如何从firebase中的节点检索值并显示在回收器视图中?
- amazon-web-services - 在 EC2 实例上监控 ML 模型的性能
- python - 根据最后一个值填充缺失值
- docplex - docplex 中的 CPU 时间 - Python
- android - React Native:防止屏幕被关闭
- node.js - 首次启动 React Native 应用程序时的展示视图
- java - can-i-deploy 在第一个新的消费者构建时失败
- android - Firebase 分析事件的自定义参数 (Android)
- python - 编写一个程序来接受来自用户的四位数字,并从输入的数字中计算零、奇数和偶数
- javascript - 在 Cucumber 中将选定的 dataTable 行转换为整数