先放上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a {
text-decoration: none;
}
.statement-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 20px
}
.statement-wrap {
z-index: 1230
}
.statement-wrap::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10
}
.statement-wrap .title {
color: #E60012;
font-weight: 700;
text-align: center;
margin-bottom: 1.3em;
font-size: 24px;
}
.statement-wrap .st-btn {
display: inline-block;
width: 160px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
background-color: #E60012;
border-radius: 26px
}
.statement-box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
max-width: 870px;
max-height: 800px;
border-radius: 10px;
padding: 2.6em 3.3em;
z-index: 60
}
.statement-box .txt {
display: inline-block
}
.statement {
max-height: 450px;
overflow: auto;
}
.text-center {
text-align: center;
}
.paragraph {
font-size: 16px;
color: #555;
letter-spacing: 1px
}
</style>
<script type="text/javascript">
function watchWindowSize() {
var h = document.documentElement.clientHeight;
var statementDom = document.getElementById("statement")
var statementHeight = h - 320
statementDom.style.height = statementHeight + 'px'
}
window.onload = function() {
watchWindowSize()
}
window.addEventListener("resize", watchWindowSize);
</script>
</head>
<body>
<section class="statement-wrap">
<div class="statement-box">
<div class="title">这里放了标题</div>
<div class="txt paragraph statement" id="statement">
<p>这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。</p>
<p>这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。</p>
<p>这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。</p>
<p>这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。</p>
<p>好了,没有内容了。好了,没有内容了。好了,没有内容了。好了,没有内容了。好了,没有内容了。好了,没有内容了。好了,没有内容了。</p>
<p>强调一下!</p>
<p style="text-align: right;"><span style="font-size:14px;">某某某<br />某年某月某日</span></p>
</div>
<div class="text-center">
<a href="javascript:;" class="st-btn">ok</a>
</div>
</div>
</section>
</body>
</html>
原理通过监听窗口的变化来动态获取窗口大小
使用的方法addEventListener()
监听window的resize事件
相关方法
var div = document.getElementById("div");
div.clientWidth;
div.clientHeight;
div.offsetWidth;
div.offsetHeight;
div.scrollWidth;
div.scrollHeight;
$(window).height();
$(window).width();
$(document).height();
$(document).width();
$(document).scrollTop();
$(document).scrollLeft();
$(id).offset();
offset(options, results)
options.relativeTop
options.scroll
options.padding
options.margin
options.border