Google apps script HtmlService独立webapp CSS caja显示问题

我这里有一些简单的CSS来显示Web应用程序的侧栏，但是我不能让这两个div并排显示。我使用了许多不同的CSS库，它们都具有相同的行为

我猜是卡娅在碍事，但我不确定

有人能解释这一点，或者提供一个解决方案吗？我希望有一个反应灵敏的设计，使平板电脑/手机设备也可以使用这个应用程序

Code.gs:

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

<?!= include('css'); ?>
<div id="left">Side menu</div>
<div id="right">Scroll
    <br />Scroll
    <br />Scroll
</div>

<style>
html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#left {
    width: 20%;
    height: 100%;
    position: fixed;
    outline: 1px solid;
    background: red;
}
#right {
    width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: blue;
}
</style>

index.html:

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

<?!= include('css'); ?>
<div id="left">Side menu</div>
<div id="right">Scroll
    <br />Scroll
    <br />Scroll
</div>

<style>
html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#left {
    width: 20%;
    height: 100%;
    position: fixed;
    outline: 1px solid;
    background: red;
}
#right {
    width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: blue;
}
</style>

配菜
纸卷

滚动

滚动

css.html:

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

<?!= include('css'); ?>
<div id="left">Side menu</div>
<div id="right">Scroll
    <br />Scroll
    <br />Scroll
</div>

<style>
html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#left {
    width: 20%;
    height: 100%;
    position: fixed;
    outline: 1px solid;
    background: red;
}
#right {
    width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: blue;
}
</style>

html，正文{
身高：100%；
保证金：0；
字体大小：20px；
}
#左{
宽度：20%；
身高：100%；
位置：固定；
外形：1px实心；
背景：红色；
}
#对{
宽度：80%；
高度：自动；
外形：1px实心；
位置：绝对位置；
右：0；
背景：蓝色；
}

位置：HTML服务中不允许使用固定的

CSS声明-。我个人觉得这是一个愚蠢的限制，但我又是谁呢，可以和谷歌争论……：）

一个可能的解决办法可能是这样的：

index.html

<?!= include('css'); ?>
<div id="container">
  <div id="left">Side menu</div>
  <div id="right">Scroll
      <br />Scroll
      <br />Scroll
  </div>
</div>

<style>
html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#container {
  position: relative;
  height: 100%;
  width: 100%;
}
#left {
    width: 20%;
    height: 100%;
    position: absolute;
    left: 0;
    background: red;
}
#right {
    width: 80%;
    height: 100%;
    position: absolute;
    right: 0;
    background: blue;
    overflow-y: scroll;
}
</style>

配菜
纸卷

滚动

滚动

css.html

<?!= include('css'); ?>
<div id="container">
  <div id="left">Side menu</div>
  <div id="right">Scroll
      <br />Scroll
      <br />Scroll
  </div>
</div>

<style>
html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#container {
  position: relative;
  height: 100%;
  width: 100%;
}
#left {
    width: 20%;
    height: 100%;
    position: absolute;
    left: 0;
    background: red;
}
#right {
    width: 80%;
    height: 100%;
    position: absolute;
    right: 0;
    background: blue;
    overflow-y: scroll;
}
</style>

html，正文{
身高：100%；
保证金：0；
字体大小：20px；
}
#容器{
位置：相对位置；
身高：100%；
宽度：100%；
}
#左{
宽度：20%；
身高：100%；
位置：绝对位置；
左：0；
背景：红色；
}
#对{
宽度：80%；
身高：100%；
位置：绝对位置；
右：0；
背景：蓝色；
溢出y：滚动；
}

这将给你2列，只有一列是可滚动的（如果内容超过屏幕高度）