想要创建一个图像适合屏幕的 HTML 页面，根据屏幕尺寸图像正确显示，没有页眉和页脚，同时添加页眉和页脚时出现垂直滚动条。
如何解决这个问题？
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.row {
display: table-row;
width:100%;
height: 100%;
}
.header, .footer{
background: pink;
display:table-row;
text-align: center;
vertical-align: middle;
}
.content {
display: table;
background: brown;
width:100%;
height: 100%;
overflow: auto;
}
.left, .right{
background: green;
display: table-cell;
width:10%;
vertical-align: middle;
}
.middle{
background:white;
display: table-cell;
vertical-align: middle;
} </style>
<script>
function winResized() {
var $image=$('#image');
if ($image.size()) {
var ww=$(window).width();
var wh=$(window).height();
var iw=$image.width();
var ih=$image.height();
var f=Math.min(ww/iw,wh/ih);
var iwr=Math.round(iw*f);
var ihr=Math.round(ih*f);
$image.css({
'width': iwr,
'height': ihr,
'left': (Math.round(ww-iwr)/2)+'px',
'top': (Math.round(wh-ihr)/2)+'px'
});
}
}
$(window).load(function() {
winResized();
}).bind('resize',function() {
winResized();
});
</script>
<body>
<div id="container">
<div class="header">
<h4>header</h4>
</div>
<div class="row">
<div class="content">
<div class="left">Left </div>
<div class="middle"><br/><center>
<img id="image" src="http://static.adzerk.net/Advertisers/c050fce5e0094decb57fdb53f4ca4254.jpg"/>
</center>
</div>
<div class="right">Right</div>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</div>
</body>
</html>
最佳答案
使用计算():
http://codepen.io/jlowcs/pen/bNjayX
HTML:
<div style="height: 150px; background: red;"></div>
<div style="height: calc(100% - 250px); background: blue;"></div>
<div style="height: 100px; background: green;"></div>
CSS:
html, body { height: 100%; margin: 0; padding: 0; }
关于javascript - 图像适合屏幕。如何在添加页眉和页脚时删除滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28856071/