0

这里是 Javascript 的新手。

我正在尝试制作一个包含 3 个部分的简单单页网站：标题区域、作品集区域和联系表格。这些部分中的每一个都是锚链接的，因此当单击链接时，页面会向下滚动到该部分。

我使用 javascript 来确保每个部分都将填满屏幕，如果空间允许，水平和垂直居中。但是，这些测量值不会在窗口调整大小时更新。

我无法确定问题所在，因为我的初始代码（根据视口的高度控制标题的高度）确实会在调整大小时更新，直到我添加新行。

这是脚本：

<script type="text/javascript">//<![CDATA[ 
        function resize()
        {
            var heights = window.innerHeight;
            var header = document.getElementById('title').offsetHeight;
            var logo = document.getElementById('logo').offsetHeight;
            var portfolioHeight = document.getElementById('portfolio-buttons').offsetHeight;
            var hireHeight = document.getElementById('hire-form').offsetHeight;
            document.getElementById('header').style.height = heights - header - logo * 0.4 + "px";
            document.getElementById('portfolio').style.padding = (heights - portfolioHeight) * 0.5 + "px 0";
            document.getElementById('hire').style.padding = (heights - hireHeight) * 0.5 + 5 + "px 0";   
        }
        resize();
        window.onresize = function() {
            resize();
        };
        //]]>
</script>

以下是相关 HTML 的基本结构：

<div id="portfolio">
    <div id="portfolio-buttons">
         Content here
    </div>
</div>
<div id="hire">
    <div id="hire-form">
         Content here
    </div>
</div>

编辑：为了更加清楚，这里是作为他们自己的脚本工作的行：

<script type="text/javascript">//<![CDATA[ 
        function resize()
        {
            var heights = window.innerHeight;
            var header = document.getElementById('title').offsetHeight;
            var logo = document.getElementById('logo').offsetHeight;
            document.getElementById('header').style.height = heights - header - logo * 0.4 + "px";   
        }
        resize();
        window.onresize = function() {
            resize();
        };
        //]]>
</script>

以下是那些有效的，但只在刷新时更新，而不是调整大小。

<script type="text/javascript">//<![CDATA[ 
        function resize()
        {
            var heights = window.innerHeight;
            var portfolioHeight = document.getElementById('portfolio-buttons').offsetHeight;
            var hireHeight = document.getElementById('hire-form').offsetHeight;
            document.getElementById('portfolio').style.padding = (heights - portfolioHeight) * 0.5 + "px 0";
            document.getElementById('hire').style.padding = (heights - hireHeight) * 0.5 + 5 + "px 0";
        }
        resize();
        window.onresize = function() {
            resize();
        };
        //]]>
</script>
4

1 回答 1

0

尝试

window.onresize = function() {
            resize();
            return true;
        };

如果这不起作用，请尝试使用window.addEventListener("resize",function(){...})istead。要支持旧版本的 IE，您必须检查if(window.addEventListener){/*standards*/window.addEventListener("resize",function(){...})}else{/*IE only*/ window.attachEvent("onresize",function(){...}

于 2013-11-14T04:19:00.913 回答