HtmlService standalone webapp CSS caja display issue

Question

У меня есть простой CSS здесь, чтобы отобразить боковую панель для webapp, однако я не могу получить два DIVs для отображения рядом. Я использовал несколько различных библиотек 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

ОбъявлениеCSS не разрешено в HTML-службе - it's one of documented restrictions. Я лично считаю, это глупо ограничение, но кто я такой, чтобы спорить с Google ... :)

Возможным обходным может быть что-то вроде этого:

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 колонки, только с правильным ЮКЖД ollable (если содержимое превышает высоту экрана).