Question

我想知道是否可以制作具有全宽标题，内容和页脚的不可滚动网页，以便在不同的显示器尺寸上进行缩放？因此它可以作为网络信息亭的前端运行。

Answer 1

是的，有可能。你可以做一些简单的事情，如（jsFiddle）：

体：

<div id="header"> header </div>
body
<div id="footer">footer</div>

使用CSS管理布局：

#header{width:100%; background:#f00;}
#footer{width:100%; background:#f00;bottom:0;position:absolute;}

要使页面不可滚动，您只需指定：

即可隐藏页面上的滚动条

body{ overflow: hidden;}

这不适用于所有场景，但它应该让你开始。

Answer 2

你可以在CSS 3.0上使用vh和wh单位

查看此link了解详情，您也可以查看一些示例here，并在action

中查看

Answer 3

是的，可以做到。这是我用一点CSS创建的Javascript函数。这非常适合在不改变比率的情况下自动调整页面大小。这将在启动时以及调整窗口大小时调整页面大小。

CSS：

body{
   height:620px;
   width:1023px;
   position:absolute;
   box-sizing:border-box;
   transform-origin: 0 0;
   -moz-transform-origin:0 0;
   -o-transform-origin: 0 0;
   -webkit-transform-origin: 0 0;
}

JavaScript的：

var ratio;
var left;
resize();

$(window).resize(function () {resize();});

function resize()
{
    ratio = window.innerHeight / $('body').innerHeight();
    if (window.innerWidth / $('body').innerWidth() < ratio) {
        ratio = window.innerWidth / $('body').innerWidth();
    }
    ratio -= .04;
    $('body').css('-ms-zoom', ratio);
    $('body').css('-moz-transform', 'scale(' + ratio + ')');
    $('body').css('-o-transform', 'scale(' + ratio + ')');
    $('body').css('-webkit-transform', 'scale(' + ratio + ')');
    $('body').css('transform', 'scale(' + ratio + ')');
    left = ($(window).innerWidth() - $('body').outerWidth() * ratio) / 2;
    $('body').css('left', left);
}

自动缩放HTML页面

3 个答案: