Question

我在这里有一些简单的CSS来显示webapp的侧边栏，但是我无法让两个DIV并排显示。我使用了许多具有相同行为的不同CSS库。

我的猜测是caja正在阻碍，但我不确定。

任何人都可以阐明这一点，或者提供解决方案吗？我希望有一个响应式设计，以便平板电脑/手机设备也可以使用这个应用程序。

Code.gs：

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

的index.html：

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

css.html：

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

Answer 1

position: fixed HTML服务中不允许使用CSS声明 - it's one of documented restrictions。我个人认为这是一个愚蠢的限制，但我是谁与谷歌争论......：）

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

<强>的index.html

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

<强> css.html

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

这将为您提供2列，只有一列可滚动（如果内容超出屏幕高度）。

HtmlService独立webapp CSS caja显示问题

1 个答案: