Bubble高さを画面幅いっぱいに表示する方法

完成品

ノーコードツールBubbleを使って、画面幅いっぱいにElementの高さを指定する方法をまとめました。
完成品はコチラになります。

よくあるヘッダー、サイドバー、メインセクション、フッターのデザインですが、BubbleでGroupを重ねて作っていると、画面下部に余分な隙間が出来てしまいます。

パソコンのディスプレイサイズによって余白が出来てしまうとかっこわるいですよね。
特に追加するプラグインもないので、サクッと設定しちゃいましょう。

FloatingGroup設定

一番初めにページ全体をFloatingGroupで囲います。
大事なのは、Vertically float relative toをBothに設定することです。

公式のreferenceには「上下距離は一定のままで、コンテンツ表示できない場合は、スクロールバーが表示されます」と書かれています。
この仕組みをうまく利用します。

次に要素幅と高さの設定になります。
Min width,Min heightは共に0pxに設定し、Fit height to contentのみチェックを入れておきます。
＊ContainerLayoutは縦並びのColumnを指定しておきます。

公式refelence
https://manual.bubble.io/core-resources/elements/containers#vertically-float-relative-to

以上でFloatingGroupの設定は終了です。
次にこの中にGroupを入れていきましょう。

HeaderGroup作成

FloatingGroupの中にGroupを追加します。
Min widthは０px、Fit width to contentはチェックを外しておきます。
これは、横幅いっぱいに要素を表示するためです。
高さは40px~64pxの間くらいがきれいに見えると思うので、今回は56pxに設定しました。

このGroupの中にTextを追加して、サイトタイトルを入力しましょう。
今回は「ViewPort Height」としました。

Body作成

続いて、真ん中のセクションであるBodyを追加します。
Groupを追加し、SideBarとMainSectionを横並びにしたいので、Rowを選択します。

SideBar作成

BodyGroup内にSideBarGroupを作成します。
ここの設定で重要なのが、Vertical alignmentをVertical stretchに設定することです。
この設定により、GroupSidebarの高さが親要素の高さいっぱいに設定されます。
※親要素のContainer layoutがRowでないと使えないので、注意してください。

MainSection作成

SideBarと同じ要領でMainsectionも作成します。
SideBarはWidthを200pxで固定していましたが、Mainsectionでは、画面横幅いっぱいに表示したいので、Min width 0pxにして、Fit width to contentのチェックは外しておきます。

Footer作成

最後にFooterを作成しますが、こちらはHeaderをコピーして最下部に移動しましょう。
Elementをコピーするときは、Ctrl+Dを押して複製（Duplication）がおすすめです。
そのあとに、ElementTreeから移動させます。
＊ドラッグ＆ドロップでもOKです。

まとめ

これでPreviewしてみると、画面幅にちょうど収まっていると思います。
Debuggerが最下部に表示されて、Footerが見えない場合は、URLから「?debug_mode=true」を消してみて下さい。
2021年11月に新レスポンシブに変更されてから、レスポンシブ対応が容易になりました。
横幅の設定はわかりやすいんですが、高さの設定はちょっとわかりにくいので、参考にしていただけると幸いです。
このほかにもCSSを書いて100Vhの設定をする方法もあるそうです。
実装したらnoteに書くかもしれません。