Javascript 图像适合屏幕。如何在添加页眉和页脚时删除滚动条_Javascript_Jquery_Css_Html

Javascript 图像适合屏幕。如何在添加页眉和页脚时删除滚动条

javascript jquery css html

Javascript 图像适合屏幕。如何在添加页眉和页脚时删除滚动条,javascript,jquery,css,html,Javascript,Jquery,Css,Html,要创建一个HTML页面，根据屏幕大小正确显示图像，在添加页眉和页脚时，图像不带页眉和页脚，而是显示在垂直滚动条上。如何解决这个问题 <!DOCTYPE html> <html> <head> <title>Test</title> </head> <script language="javascript" src="https://ajax.googleapis.com/

要创建一个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>


测验
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#容器{
显示：表格；
身高：100%；
宽度：100%；
文本对齐：居中；
}    
.行{
显示：表格行；
宽度：100%；
身高：100%；
}
.页眉，.页脚{
背景：粉红色；
显示：表格行；
文本对齐：居中；
垂直对齐：中间对齐；
}    
.内容{
显示：表格；
背景：棕色；
宽度：100%；
身高：100%；
溢出：自动；
}
.左，.右{
背景：绿色；
显示：表格单元格；
宽度：10%；
垂直对齐：中间对齐；
}
.中{
背景：白色；
显示：表格单元格；
垂直对齐：中间对齐；
}   
函数winResized（）{
var$image=$（“#image”）；
如果（$image.size（））{
var ww=$（window.width（）；
var wh=$（window.height（）；
var iw=$image.width（）；
var ih=$image.height（）；
变量f=数学最小值（ww/iw，wh/ih）；
var iwr=数学圆（iw*f）；
var ihr=数学四舍五入（ih*f）；
$image.css（{
“宽度”：iwr，
“高度”：国际卫生条例，
‘左’：（数学圆（ww iwr）/2）+‘px’，
“顶部”：（数学圆整（wh-ihr）/2）+“px”
});
}
}
$（窗口）。加载（函数（）{
winResized（）；
}).bind（'resize'，function（））{
winResized（）；
});
标题
左边


正当
页脚

使用calc（）：

HTML:

您将内容类的高度设置为100%

要解决此问题，可以为添加此代码。内容：

 .content {
    display: table;
    background: brown;
    width:100%;
    height: calc(100% - 80px);
    overflow: auto;
}

页眉和页脚的总高度为80px。（在代码中）

尽管上述两个答案可能都适用。。calc没有很好的跨浏览器支持，您可能需要检查一下

您可以使用绝对定位和填充来实现

JSFIDLE

body，html{
身高：100%；
保证金：0；
填充：0；
}
.标题{
位置：绝对位置；
排名：0；
高度：100px；
宽度：100%；
背景：#f00；
}
梅因先生{
身高：100%；
填充：100px 0px；
背景：#0f0；
宽度：100%；
框大小：边框框；
}
.页脚{
位置：绝对位置；
底部：0px；
宽度：100%；
高度：100px；
背景：#00f；
}

谢谢您的回复。已经试过了，我正在用jquery计算图像大小，时间滚动很快。请验证html Jquery部分。您可以将页眉和页脚位置设置为“固定”。或使用（（高度：100hv））

html, body { height: 100%; margin: 0; padding: 0; }

 .content {
    display: table;
    background: brown;
    width:100%;
    height: calc(100% - 80px);
    overflow: auto;
}

body,html {
  height: 100%;
    margin: 0;
    padding: 0;
  }

.header {
   position: absolute;
   top: 0;
    height: 100px;
  width: 100%;
  background: #f00;
  }

.main {
   height: 100%;
   padding: 100px 0px;
  background: #0f0;
    width: 100%;
    box-sizing: border-box;
  }

.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
    background: #00f;
}
<div class='header'></div>
<div class='main'></div>
 <div class='footer'></div>