Geek Answers Handbook

How to make flexible height modal with a fixed header

I created a really simple way to reduce or expand content without moving from the page - always leaving a 10% edge above and below. When the page is not tall enough to contain all the modal content, the whole modal becomes scrollable.

See jsfiddle here

Is it possible, using only CSS, to replicate this behavior, but only to scroll the modal body, so the header is always fixed. I tried a few things, but have not yet come up with a solution. Creating a position: fixed header almost works, so I have to move it over the modal field, and then try to add a registration to the body so that the content is visible under the heading, which does not move the scroll bar down. I always prefer to exhaust all css alternatives before binding some js to window size and manually manipulating body growth.

+4
source share
2 answers

Applying the max-height and overflow-y .body to .body and not to .wrap ...?

Change 1:

So far, nothing has fallen within the limits, which suggests either JavaScript or deviations from the restrictions (using% for the height of the header or px margin ).

Edit 2:

Here's the initial demo using% for the header height. I added the min-height tag to the title tag so that the title hardly disappears on very small screens due to the top edge (which is reduced on very small screens).

On the screen> = 400px high it should work exactly as required (40px header with 10% height). If the title was reduced in height, it would support slightly smaller screens (a 30px title with a height of 10% would support screens> = 300 pixels). Here is a demo with a 30px header.

These are clumsy solutions, but this is the only thing that turned out to be without using JavaScript.

Also, note that I added the h2 and .content and moved padding:10px; there padding:10px; to avoid combining% height and padding in the same elements (which results in a higher height than the specified% value).

+1
source

It may be late, but I had to solve a similar problem with a fixed header, the height of the liquid, the width of the liquid.

This is how I solved the problem:

  • Give your items the size of the boxed border. Use the center wrapper and create a bounding box. It can be liquid with a minimum width and maximum width + percent.
  • Give the content item an auto-overflow-y and a maximum height of 100%;
  • Use window size: border-box;

The full code should look something like this:

 * { margin: 0; padding: 0; box-sizing: border-box; } .modal { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); } .wrap { position: relative; margin: 0 auto; display: block; width: 90%; /* Change the max-width value on a media query breakpoint to make this example more "responsive" */ max-width: 500px; height: 90%; padding: 30px; } .modal header { height: 30px; padding: 0; color: #FFF; background-color: #007; } .modal .body { background-color: #FFF; max-height: 100%; overflow-y: auto; }

http://jsfiddle.net/mariomc/EhR7r/

+4
source

More articles:


All Articles