Try this:
<body style="height: 100vh;">
<fs-gist gistID="fireflysemantics/054716730103cd205c39167054542f68">
</fs-gist>
</body>
Setting the height of the body to 100vh allows the fs-gist element to expand within it.
Demo:
https://stackblitz.com/edit/typescript-fs-gist-set-body-height-demo
You may want to try CSS Flex (W3Schools). Here is an example of how I use a flex container for both horizontal and vertical sizing. This is the CSS of the src page ’embedded’ in my iFrame and sizes automatically to the height and width. The iFrame is embedded in a Responsive page and sizes accordingly when rotating on a mobile device or resizing the browser window in a desktop.
.flex-container-horizontal
{
display: flex;
align-items: stretch;
width: 100%;
}
.flex-container-vertical
{
display: flex;
align-items: stretch;
align-content: stretch;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
min-height: 120px;
justify-content: flex-start;
width: 100%;
}
.flex-container
{
display: flex;
flex-direction: column;
height: 100%;
padding: 8px;
text-align: left;
}
Trying to get the iframe rendering the gist within this fs-gist custom element in this demo to expand such that the entire gist shows.
The custom element fs-gist has the following host CSS defined:
static styles = css`
:host {
display: block;
width: 100%;
height: 100%;
}
`;
And the iframe that the gist is rendered into has it’s inline style defined like this:
style="width: 100%; height:100%;"
How can we get the gist to fill to its complete height?
The code that renders the gist inside the iframe looks like this:
firstUpdated() {
let fileName = (this.file) ? this.file : '';
this.iframe.id = 'gist-' + this.gistID;
let doc = (this.iframe.contentDocument || this.iframe.contentWindow) as Document;
let content = `
<html>
<head>
<base target="_parent">
</head>
<body onload="parent.document.getElementById('${this.iframe.id}')">
<script type="text/javascript" src="https://gist.github.com/${this.gistID}.js?file=${fileName}"></script>
</body>
</html>
`;
doc!.open()
doc!.write(content)
doc!.close()
}
And the iframe template looks like this:
render() {
return html`
<iframe id="gist" type="text/javascript" frameborder="0" style="width: 100%; height:100%;"></iframe>
`;
}
I see what you mean now. If the container element has a set height, the gist will expand.
I updated your answer. It feels a little “Hacky” but setting container element height as show allows the