Create a full-height rectangle in Adobe Muse


Adobe
Graphics by Kalika Arora
Adobe Muse makes it easy to create elements that span the entire width of the browser. However, there isn’t an out-of-the box feature available to create an element with a 100% height. Using graphic styles and a little bit of code, you can create fluid elements that span the entire height of the browser, irrespective of the size of the monitor or device of a user viewing your website.
In this post, I will show you how you can create a full-height rectangle and enhance the look and feel of your website.
Here are two examples in which full-height rectangles have been used to create sidebars and pretty-looking navigation bars.
      
Read on to find a small code snippet that helps you stretch a rectangle to 100% height.

Open the master page of your site in Adobe Muse.
Create a rectangle in the upper-left corner and fill it with the color you want.
Pin the rectangle clicking the upper-left pin from the Pin tool.

Select the rectangle.
Choose Window > Graphic Styles to open the Graphic Styles panel.
Click Create a new graphic style from the attributes applied.

The new graphic style is applied to the selected rectangle.
Double-click the new graphic style, rename it to fullHeight and, click OK. Make sure you specify the correct Style Name.
To check how the page looks in the browser, select Preview Page in Browser from the File menu. You will notice that the rectangle does not stretch to full-height. Now, let us add a little piece of code to the master page, to stretch the rectangle to full-height.
Copy the following code snippet.

<style>
.fullHeight {
min-height: 100vh !important;
height: 100vh !important;
}
</style>

From the Page menu, choose Page Properties > Metadata, and paste the code in the HTML for <head> section.
Click OK and, preview the page. You will see that the rectangle stretches to 100% height of the browser.

 
Using the full-height rectangle in a navigation menu
You can use a full-height rectangle to enhance a vertical navigation menu. I have used the Adobe Muse starter template My Name to demonstrate this scenario.

Open the master page of your template.
Create a rectangle on the left edge of the master page.
Fill the rectangle with the desired color and click the upper-left pin from the Pin tool.
To ensure that the rectangle is on the top layer, right-click on the rectangle, and choose Move to Layer > Menu.

To bring the rectangle to the bottom of the navigation, right-click on it again. Choose Arrange > Send to Back. If you do not see the Send to Back option, it implies that the rectangle is already at the back.
Now, follow steps 4 to 10 from the first section.

That’s it! Your navigation is now ready.
Creating a sidebar using the full-height rectangle
Read on to know how you can use a full-height rectangle to create a sidebar on the left of your website. I have used the Adobe Muse starter template Kahve to demonstrate this scenario.

Open the master page of the template.
Create a rectangle on the left edge of the master page and fill the rectangle with a desired color.
Add a text frame and type “THE KAHVE CAFE” (or any name you like) in the text frame.

Rotate the text frame to 90 degrees and place it above the rectangle that you created.

Add a logo in the upper-left part of the page.

Select the rectangle, the text frame and the logo by holding the Shift key, and pin the objects clicking the upper-left pin from the Pin tool.
Ensure that the rectangle, the text frame and the logo are on the top layer. Select the three objects by pressing the Shift key, and right-clicking on any one of these objects. Choose Move to Layer > Menu.
Now, follow steps 4 to 10 from the first section.

That’s all! Your sidebar is now ready.
To learn more about Adobe Muse, see Adobe Muse CC Tutorials.