Menu icon Foundation
Example of full screen app

Hi there,

I'm looking to use Foundation for a new project, which has to be full screen (width and height), with a fixed header (always visible), and fixed footer (always visible).
I browsed many examples and posts, but I saw none of these dealing with what I'm looking for.
Is it possible to build what I want simply with Foundation, and how? I think this is a very basic feature, Bootstrap is ok with this.

Thanks for your help!

fullheightwidthheaderfixed

Hi there,

I'm looking to use Foundation for a new project, which has to be full screen (width and height), with a fixed header (always visible), and fixed footer (always visible).
I browsed many examples and posts, but I saw none of these dealing with what I'm looking for.
Is it possible to build what I want simply with Foundation, and how? I think this is a very basic feature, Bootstrap is ok with this.

Thanks for your help!

Tom Hogan over 3 years ago

Not quite sure what you mean by "full screen". Foundation is fully responsive so it looks great on small, medium and large devices. You're able to use media queries and visibility classes to get the right look and content for any size screen.

As for having a "fixed" or sticky header and footer, I don't see why not.

Rafi Benkual over 3 years ago

You can easily achieve a non-scrolling app style layout.

Wrap your content

<section class="frame">
<!-- your content-->
</section>

css

.frame {
margin; 0;
height: 100vh;
}

Rafi Benkual over 3 years ago

@Tom - He is trying to make an app type layout that you would find on a native app like Facebook, Twitter, pinterest, spotify, etc. They have 100% viewport height and width and do not tend to scroll. Instead they will have scrollable content. Example: http://zurb.us/1rTbdiT

With the current state of the the web with and browser support using fixed position elements is required to make these pages with scrolling content in a frame. Hopefully something like flexbox is the answer since you don't need to use fixed positioning. There is growing demand for stateless 1 page app layouts so this will likely be more common.

Elan Dawin 11 days ago

AppEven is one of the best application for Full screen app. You can check it out.