Question

Hello Stack Overflow社区！我还没有真正利用这个资源，基本上学习了如何从头开始使用Google Apps脚本（我对脚本语言的知识非常有限）。我在将jQuery嵌入到我的Web App中时遇到了麻烦，我向专家寻求帮助。

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

Code.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>

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

Answer 1

这很简单;幸运的是，CSS能够为物体的大小设置天花板和地板。

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

答案：

min-height: 100%;

div应该已经尝试调整大小以允许它的内容完全适合它的音量。通过添加此标记，div仍将调整大小OR如果其内容的总高度小于屏幕的高度，则div仍将保持屏幕的高度。

Answer 2

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

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

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

2 个答案: