我创建了一个具有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>
边角快照如下
答案 0 :(得分:1)
它可以与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>