HtmlService獨立的webapp CSS caja顯示問題

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

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列，只有正確的SCR （如果內容超過屏幕高度）。