Creating a 100% height rectangle element.

New Here ,
Jun 30, 2012 Jun 30, 2012

Copy link to clipboard

Copied

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

Views

42.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Employee , Jul 02, 2012 Jul 02, 2012
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/ideasRegards,Abhishek Maurya

Likes

Translate

Translate
Adobe Employee ,
Jul 02, 2012 Jul 02, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 22, 2016 Mar 22, 2016

Copy link to clipboard

Copied

Hi there,

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

Thank you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 30, 2012 Aug 30, 2012

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 14, 2013 Jan 14, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 18, 2013 May 18, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 15, 2013 Aug 15, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 10, 2013 Oct 10, 2013

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 15, 2013 Oct 15, 2013

Copy link to clipboard

Copied

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!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 16, 2013 Oct 16, 2013

Copy link to clipboard

Copied

@MorganPielli

A little muse'file as exemple

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 05, 2015 Jun 05, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 11, 2015 Sep 11, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 12, 2015 Sep 12, 2015

Copy link to clipboard

Copied

Try this free widget from qooqee....

Header Page

(click link)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 16, 2015 Sep 16, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 23, 2017 Apr 23, 2017

Copy link to clipboard

Copied

LATEST

Thank you very much for this!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 05, 2015 Jun 05, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 06, 2015 Jun 06, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 04, 2015 Nov 04, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 05, 2015 Nov 05, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 05, 2015 Nov 05, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 05, 2015 Nov 05, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 05, 2015 Nov 05, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 05, 2015 Nov 05, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 05, 2015 Nov 05, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 05, 2015 Nov 05, 2015

Copy link to clipboard

Copied

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

Erol

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines