Google Apps 脚本上的动态 <div> 高度答案

【问题标题】：Dynamic <div> height on Google Apps ScriptGoogle Apps 脚本上的动态 <div> 高度
【发布时间】：2013-10-10 23:15:36
【问题描述】：

您好 Stack Overflow 社区！我还没有真正利用过这个资源，基本上是从头开始学习如何使用 Google Apps 脚本（我对脚本语言的了解非常有限）。我在将 jQuery 嵌入我的 Web 应用程序时遇到问题，我向专家寻求帮助。

这只是我想出的一个简单示例，以说明我想要实现的目标。我想要的是“容器” div 具有动态高度。这样一来，无论大小如何，整个屏幕都被填满（嗯，最有可能不是手机）。代码如下：

代码.gs

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>

我认为我的帖子太长了，但我想展示所有四个部分的内容。想确保我没有忽略任何东西。

【问题讨论】：

标签： javascript jquery html css google-apps-script

【解决方案1】：

只需使用它并使其适应您想要做的事情。

<!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>

【讨论】：

【解决方案2】：

这是一个简单的；幸运的是，CSS 能够为对象的大小设置上限和下限。

在您的情况下，您希望将 div 高度的下限（即可能的最低值）设置为屏幕高度。

答案：

min-height: 100%;

div 应该已经尝试调整大小以使其内容完全适合其体积。通过添加此标签，div 仍将调整大小，或者如果其内容的总高度小于屏幕高度，则 div 仍将保持屏幕高度。

【讨论】：