Setting a Section to be browser "Full Height" somehow?

[NoraWickman]

I'm wondering if anyone knows how to set a section to fill up the "full height" of a browser window, by default?

Basically, some websites include CSS which lets you set a section to be the height of the user's browser, so when you click on it you automatically get a nice screen-filling image that you can then scroll downward past.

It's a bit like having a splash page, but with a lot more flexibility.

I can guesstimate how big I think someone's average browser size is and set it to that height, using the Sections already. But I was curious if there was some way to have it set the "auto" adjustment height (seen when you shrink a section as small as possible / content would allow) to the full height of the browser so I could make one of those 'fake splash backgrounds' more easily.

It isn't super important, they just look really slick.

[Bernadette3]

Hi @NoraWickman I think I know what you are describing, but can you post a link to a sample website? There's a few css experts on here that can probably help you out, but examples are always welcome and helpful. Thanks! 

[NoraWickman]

Sure thing! Here's an example that I was looking at yesterday:

http://yakudoo.com/

It looks like a splash screen but you can scroll down past it like a normal sectioned website. It is a nice effect. The size of the video playing in the background is controlled by a frame that always expands to whatever the height and width of one browser screen.

The effect is referred to as "full height" in the code chunk that controls it:

<div id="fullscreen-menu" class="full-height" style="top: 0px;">
			<div class="menu-inner">

This seems to be a function of the template being used by the website.

I'm oblivious to CSS, so maybe it is a million times harder to grab a screen height value than a screen width one.

But if we could squiggle that CSS into my Weebly header code, many of our existing templates could pull off the same effect with the pro-account video background effects. Would be super cool.

[Adam7]

It is possible to have CSS apply to specific sections, although something like this could necessitate HTML changes on top of CSS changes. Is the site you want to do this with live? It's a little easier for our CSS-savvy members to figure out if they see the live site.

[NoraWickman]

The site is live. It is a personal portfolio site that I'm working on:  www.neilwickman.com

I don't yet have the kind of content I would want to use these modifications for. Before I did any extra work in that direction I wanted to know if it was possible, and if it was possible, is it easy or difficult to do.

Currently using the Journey theme template with nothing but stock assets. 

Right now the "landing spot" of the page looks pretty decent, I used a header with a bit of spacing and a logo doodad to make it take up not much more than one average smartphone screen. There's no way to manually tweak it for both phones and desktops though, due to the responsive theme settings, so I'm resolved to be content.

[Schleckenmieste]

Hey dude,

I came across this and I just figured this out with my own website. It's quite a simple fix. Go to Themes then create a new header-type. For the <div> that shows the header section, add a style attribute and type in this: style="height:100vh;"

on my site it looks like this

<div class="container" style="height: 100vh;">

that should make it full height. Hope that helps this (over a year old) question.