CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3704512
user3704512

Reputation: 151

How to make a fluid-container fit vertically (with scrolling only on the container) on a web page?

I have a web app I am trying to make that takes a fluid-container inside of a grid (col-md-6), and fits its contents horizontally and vertically onto the page.

Layout

The idea is to make it so the page in the browser does not scroll, but the content in the grid have 'overflow: auto;' set, so if need be the grid contents can scroll. In the picture, the table is running off the screen and the whole page can scroll, instead of just the contents.

So the grid should be fixed, and has a nav bar on all four sides, almost like a frame, that the center contents should be flushed with.

I've tried setting that center panel to position:fixed; but that takes it out of the flow of the html, so it isn't responsive. So I really need all of the content to be flush with the footer, and then respond accordingly horizontally and vertically depending on the screen size.

Any help or code would be awesome.

Upvotes: 4

Views: 2172

Answers (1)

Dan Cowell
Dan Cowell

Reputation: 385

You're going to have to write some custom CSS to make this work.

First you need to set body and html to height: 100% and min-height: 100% - you also need to do this with your fluid-container and your col-md-6. This will make them fill the space vertically. After that, set your overflow-y: scroll on the grid contents.

Note that you will have to write additional CSS in a media query to handle what happens to the layout when it responds below md size. The Bootstrap docs can help with that.

For any more detailed help I really need to see your code.

Upvotes: 2

Related Questions