Full screen CSS with minimum size

I have created a layout in CSS/HTML with the following structure:

Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.

Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.

I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.

I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.

How can I make this website generally full-screen but scroll when below a minimum size threshold?

Answers


Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?

So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/

It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.


Try this: overflow-x: auto;

It will try to put a horizontal scroll bar once the content exceeded the size of its container.


Need Your Help

Storing list data into a dictionary

python list dictionary

I'm trying to convert some data in a list to a dictionary. However, I want this dictionary to have multiple keys with multiple values, for example:

Flask app runs fine locally, but error accessing db on Heroku

python heroku flask peewee flask-peewee

I have a small Flask app (code below) that's basically just using peewee to access a Postgres database. It works fine when I run it locally, but I get a generic 500 Internal Server Error when I try...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.