0

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

我的猜测是 caja 会碍事，但我不确定。

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

代码.gs：

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

索引.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>
4

1 回答 1

2

position: fixedHTML 服务中不允许使用 CSS 声明 -这是已记录的限制之一。我个人觉得这是一个愚蠢的限制，但我有什么资格与谷歌争论...... :)

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

索引.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 列，其中只有右侧可滚动（如果内容超过屏幕高度）。

于 2014-11-04T10:47:56.887 回答