您好堆栈溢出社区！我并没有真正利用该资源，而是从头开始学习了如何使用Google Apps脚本（因为我对脚本语言的了解非常有限）。我在将jQuery嵌入到我的Web应用程序时遇到麻烦，因此我向专家寻求帮助。
这只是我想出的一个简单示例，以说明我要实现的目标。我想要的是让“容器” div具有动态高度。这样，无论屏幕大小如何，整个屏幕都被填满（嗯，很有可能不是手机）。这是代码：
代码
function doGet(request) {
return HtmlService.createTemplateFromFile('app').evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
stylesheet.html
<style>
#main {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
height: 100px;
width: 100%;
background-color: blue;
position: top;
}
#menu {
height: 50px;
width: 100%;
background-color: black;
position: top;
}
#container {
height: auto;
background-color: red;
margin-left: 15%;
margin-right: 15%;
}
#footer {
height: 50px;
width: 100%;
background-color: blue;
}
</style>
javascript.html
<script>
function adjust(){
var maxH = $("#main").height();
var afterHeight = maxH - ($("#header").height() - $("#menu").height() - $("#footer").height());
$(".kamil_test").css({height:afterHeight});
}
$(document).ready(adjust);
$(window).resize(adjust);
</script>
app.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
</script>
</head>
<body>
<?!= include('stylesheet.html'); ?>
<?!= include('javascript.html'); ?>
<div id="main">
<div id="header">
</div>
<div id="menu">
</div>
<div id="container">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
我认为我的帖子太长了，但是我想展示所有四个部分的情况。想确保我没有忽略任何东西。
最佳答案
只需使用它并使其适应您的尝试即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
</div>
<div id="content">
<h2>Min-height</h2>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>