HTML 网页全屏第 2 部分

Question

所以我现在让网页全屏显示，但我对所有 css 属性使用高度 100%，现在我在右侧看到一个滚动条。

http://www6.luc.edu/test/cabplan/maps/index2.html

当我将 #content_container 更改为高度 89% 时，它会改变它，但它在其他屏幕尺寸上看起来不同。如何使地图始终处于页脚之前的高度，并且页脚上方的右下角也带有“esri”徽标

Answer 1

这将更适合jquery。您可以调用它来调整加载时的高度和调整窗口大小时的高度。

要获取窗口高度，您可以使用

windowHeight = $(window).height();

它并将其分配给一个变量，然后减去页眉和页脚的高度。并通过使用设置 css

${'#content_container').css({width: windowHeight+"px"});

然后，如果有人调整窗口大小，您可以在类似以下

$(window).resize(function() {
  //update stuff
});

编辑的

$(document).ready(function(){
 windowHeight = $(window).height();
 divHeight = windowHeight - 100 - 100; // heights of your header/footer
 $('#content_container').css({height: divHeight+'px'});
});

$(window).resize(function() {
 windowHeight = $(window).height();
 divHeight = windowHeight - 100 - 100; // heights of your header/footer
 $('#content_container').css({height: divHeight+'px'});
});

函数中运行相同的选项，您可以通过分配变量并调用 $('#divid').height( 来替换高度的静态调用的 100's ）；由于您的标题是位置：绝对的，如果您减去标题，那么您将需要将 div 与顶部放置在相同的 px 处。

要调用 js，请在上面的 javascript 之前包含以下内容。

<script src="http://code.jquery.com/jquery-1.6.4.min.js" />