Creating a 100% height rectangle element.

[berianlowe]

I'm loving Muse so far, but I've run into a little bit of a problem.

I know that I can create a 100% width rectangle element that spans the entire width of a browser window, but I'm having trouble creating a 100% height rectangle. Any help would be really appreciated

What I want to create is a website, which as a sidebar running vertically down the left hand side of the page.

Thanks!

Just to give you an idea of what I want check out my link, http://berianlowe.businesscatalyst.com/index.html

The position is fine and I wish for it to scroll the way it does, but I would like it to extend to the bottom of the page, and when the browser is made smaller, I don't want the page content to go over the top of it.

Message was edited by: berianlowe

[Abhishek_Maurya · Accepted solution]

Hi,

I'm afraid at this point it is not possible to create a rectangle with 100% browser height. I would recommend that you add that to the Ideas section over here, http://forums.adobe.com/community/muse/ideas

Regards,

Abhishek Maurya

[Malathy_K]

Hi there,

Is this option available now in the recent responsive web design update of Muse 2015?

Thank you.

[designseed]

Good day berianlowe,

I took a look at the site you've referenced in your question (http://berianlowe.businesscatalyst.com/index.html) and I have a question for you.

Is the effect you're looking for to have the side bar on the left hand side go all the way down the height of the browser? If so have you tried the following :

01. Goto the Page or Master Page

02. Click Browser Fill in Design view (located on the control strip)

03. Click the Image : Choose Background Image icon (looks like folder)

04. Select the image you want to be the height of your browser height (the graphic you currently have)

05. Set Fitting to Tile Vertically

06. Click on the left for position

That should give you the effect you're looking for.

Let me know if this helps or if you're looking for a different effect / feature.

Sung Park

Product Manager

Adobe Muse

[RVDdekock]

hi berianlowe

I think i've got a solution to your problem. why dont you try to create a rectangle and pin it to the page so the rectangle will seem endless but its actually just scrolling down with you.

[Stefane13]

the idea of ​​square 100% high is very important.
it does not serve a menu than done.
you may also need to put a logo on an IMAGE brackground always in the middle. It is a block 100% width and height on demand and within image centered on food. Currently, you can not.

[TFP357]

well currently the only way I have found to do it is go to objects>insert HTML and paste in a div for example:

<div style="background-color:black;height:100%;width:288px;left:0;top:0;">

</div>

Then just place the object wherever you like and viola 100% height object.

[mattpearce_designer]

TFP357 - I can't get this to work on my page..

[MorganPielli]

SOLVED! First, this only works if you have your footer set to Sticky.

In Site Properties, uncheck the box in there labeled "Center Horizontally.

Click OK The content area should now be hugging the left!

Reposition your sidebar shape so it, too, is hugging the left.

With the sidebar still selected, check "Footer."

Drag the sidebar until it's touching the bottom of the screen.

Now this is the fiddly part. Stretch the sidebar waaaaaaaaaay up past the top of the screen. Until it's maybe twice as tall.

Preview in Browser to see if it clears the top of your page. You may need to play around with this until it looks right.

BAM! That should do it!!

[XTB013]

@MorganPielli

A little muse'file as exemple

Thanks

[Erol123]

to make a background image 100% height is simple! Paste this code on to your page and you will get a div element treat it like a normal box and image fill set to a 100%width and you have a 100% Height and Width! You can also add scroll effects for one page sites when you want your hero shots to fill screen 100%, Ive tried all the widget out there and none of them work properly and this free quick and simple! Code is...

<div style="background-color:black;height:100vh;width:0px;left:0;top:0;">

</div>

note the 100vh not 100% (if you want one pages sites with parallax effects)

Enjoy

[ccastellaw]

This works - thank you! Is there any way to have a slideshow fill the height of the browser, as opposed to just one single image? I know Muse has the widget for a "full screen" slideshow, but I'm designing a one-page website and I want to have the slideshow fill the screen just at the top so visitors see it first when they land on the site.

[Erol123]

Try this free widget from qooqee....

Header Page

(click link)

[ccastellaw]

This is just what I needed! Thank you!!!

[Christin-S66]

Thank you very much for this!

[cmpan1]

I know you're probably not looking to spend money but.... but..... with this company almost all things are possible in Muse....

Adobe Muse 100% Height Widget by MuseThemes

No affiliate here... just a link.

C.

[Erol123]

Thanks cmpan1 but I have tried those widgets and they dont work if you have sections on a one page scroll and you want each section to be a 100% to complicate things further they cant have a scroll effects assigned to them if you want sections to overlap as you scroll. I have discovered my solution works but not in Chrome or IOS! So back to drawing board. But works fine on simple sites.

[Stretchdj74]

Hi Erol123 and ccastellaw.

I am trying to create the same effect as on this website: http://www.instowarms.com/ in that you land on a full page slideshow but can then scroll down the rest of the page.

Is this possible with the Qooqee widget mentioned above? Any ideas how I may get this to work? I followed the instructions with the the widget and could not get the images without any bars. Plus, I am not sure how to create the rest of the page so it can scroll.

Any help would be greatly recieved.

Many thanks.

[Erol123]

Hi Stretch, yes this widget is what you need to recreate the website above, Im not sure why its not working for you? You build the your full screen slide show on a sepaerate page to the rest of your site, call it something like 'slideshow' making sure you have 'No Master' set. Then on your main page where your site will be built you place the widget and link it to your 'Slideshow' page. When you go to preview it make sure you select 'Preview whole site' not just the page. IOf you still cant get it to work let me know and I will build a dummy for you to look at. Good luck

[Stretchdj74]

Hi erol123,

Thanks for your response. Not sure what happened last night but managed to get the scrolling aspect to work this morning, but still cannot get the slide show to be 'Full" full screen. I went through each step you suggested which is identical to what Qooqee say except they also say make sure you tick the 'Fit content proportionally' No matter what happens I get white bars on each side. This is the location of the dummy site to show you what i mean: www.timwebsite.businesscatalyst.com Any ideas if this is doable?

Cheers,

Stretch.

[Erol123]

Hey Stretch, No change your widget option to 'Fill frame proprtionally' that way it will always fill the full width, let me know how it goes, thanks

[Stretchdj74]

Hi Erol123,

I have now set it up to 'Fill frame proportionally' but it only fills the frame to the size of the website size on the slideshow page. Eg currently the site is set at 500px min height so any browser window that is deeper then that will show a white bar. If I set the bottom of the page to be 1000px then the image fills the frame but when it's opened in a smaller window the image is the full 1000px deep so only shows the amount of image that would fill the frame? To try and explain what I mean I have created to pages on: www.timwebsite.businesscatalyst.com the first is set to a minimum page depth of 500px the second page has a minimum depth of 1000px. The buttons are below the gallery image. It still doesn't respond as it does on: http://www.instowarms.com/ Unless I am setting this up completely wrong.

Cheers,

Stretch.

[Erol123]

Hi Stretch, you got the width right but I can see you have a problem with white space below, I wonder if that space is you footer, if so you need to close that up on the slideshow page by draging the little blue triangles together. Ive created a dummy site of what you are trying to achive that works for me... you can download it from the link below, hopefully you will see how this was done and you can copy it. If your still having trouble you can send me your file and I will be happy to set it up for you. Good luck and let me know how it goes.

Dropbox - Header Example Site.muse

[Stretchdj74]

Hi Erol,

Thanks for that, that seems to work perfectly! Taking a closer look at it I cannot figure out what I have done differently?! But I will build it on this set up as you have it working. Thanks so much for your help. I was getting so frustrated as I understood what needed to be done but for some reason was just not getting it!

Thanks again, and I will send you a link when it's complete.

Stretch.

[Erol123]

No worries I know how frustrating it can be! Yes do send a link looks like it will be a nice site.

Erol