All geek questions in one place

How to make max div height between header and footer with CSS only?

I have an HTML page with a fixed height header and footer and an element in between.

I want the element to always have a total screen height (excluding the header and footer). For example, suppose that the total height of the screen is 1000 pixels, and each header / footer has a fixed height of 60 pixels → the height of the div element should be 880 pixels. Now I have a task to make it responsive (regardless of screen size, the behavior should be as described) WITHOUT using JavaScript / JQuery. CSS only.

I started by using "height: 100%" but don’t know how to proceed ...

<html> <head></head> <body> <header class="header">my header</header> <div class="content">content</div> <footer class="footer">my footer</footer> </body> </html>

http://codepen.io/anon/pen/QbGZgL

Note: IE 10 must also be supported ...

I reviewed flexbox, but did not understand how exactly I can use it for my needs. Say I have text and some images in the content of the page. I don’t want the vertical scroller to appear when the screen is smaller, I want all the content to be compressed so that it fills the available height.

Are there CSS3 viewport elements: vh / vw / vmin / vmax can help me here?

+6
source share
10 answers

This is a simple setup with what I think you want to accomplish. IE10 support is only possible for prefixing / using the old syntax for the flex property.

We have a wrapper element that we are talking about: now you are a flex element, and your child elements can be flexible (elements) with a display: flex;

For the direction we use the column, the default is “row”, but we want them to be under each other.

Finally, we determine the heights in the header and footer, and therefore to the main element: you have the property flex 1. Which will fill the space that remains between the elements.

 body, html { height: 100%; margin: 0; padding: 0; } .wrapper { display: flex; height: 100%; flex-direction: column; -ms-flex-direction: column; background: red; } header { height: 100px; background: blue; } main { flex: 1; background: orange; } footer { height: 20px; background: yellow; } 
 <div class="wrapper"> <header> Header element </header> <main> <h1> Main</h1> </main> <footer> Footer </footer> </div>
+4
source

To achieve this, you can use absolute positioning.

Try to execute

CSS

 .content { position:absolute; top:100px; /* make this equal to the height of your header tag */ bottom:100px; /* make this equal to the height of your footer tag */ left:0; right:0; } header { height:100px; background:green; } footer { height:100px; position:absolute; bottom:0; left:0; right:0; background:red; }

  • Give the header a fixed height.

  • Give the footer a fixed height and position:absolute with bottom:0 , left:0; and right:0; .

  • Make your content div position:absolute and give it left:0; and right:0; . Make the top position equal to the height of your header and the bottom position equal to the height of your footer.

http://jsfiddle.net/z4h64juf/1/

Hope this helps.

+2
source

you can do this with css calc:

 html,body{ height:100%; } .content{ height: calc(100% - 120px); }

Of course, you need to change 120px for any sum of footer and header height. And don't forget about vendor prefixes.

Additional information: https://developer.mozilla.org/es/docs/Web/CSS/calc

Tip: don't forget to use units inside () and don't forget to use spaces around the icons - + *, otherwise it will not work.

0
source

I recommend you the Flexible Box Layout Module , which has good support in your case (IE10 +). Many classic CSS problems can be easily resolved using it; take a look at Solved Flexbox .

The following HTML will be a simple approach to solving your problem:

 <div class="container"> <header>Header</header> <main>Page contents</main> <footer>Footer</footer> </div>

Using simple CSS:

 .container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; align-items: stretch; } .container main { flex-grow: 1; flex-shrink: 0; }

Note that the specification has changed three times since 2009, so there are slight differences in the syntax and needs of vender prefixes. The links I showed talk about this. Of course, it doesn't matter if you decide to use autoprefixer .

0
source

Fix both header and footer with position:fixed; and for using content

 padding: 60px 0; height: 100%; box-sizing: border-box;

http://codepen.io/anon/pen/xGRyNW

0
source 

 * { padding: 0; margin: 0; } body { height: 100%; width: 100%; position: absolute; } header, footer { height: 50px; width: 100%; background: red; position: fixed; } footer { bottom: 0; } main { min-height: calc(100% - 100px); padding: 50px 0; overflow: auto; } 
 <header></header> <main> <p>Hello1</p> <p>Hello2</p> <p>Hello3</p> <p>Hello4</p> <p>Hello5</p> <p>Hello6</p> <p>Hello7</p> <p>Hello8</p> <p>Hello9</p> <p>Hello10</p> <p>Hello11</p> <p>Hello12</p> <p>Hello13</p> <p>Hello14</p> <p>Hello15</p> <p>Hello16</p> <p>Hello17</p> <p>Hello18</p> <p>Hello19</p> <p>Hello20</p> </main> <footer></footer>
0
source

Approach 1: The flexbox solution works for both known and unknown header and footer heights. Browser Support: IE10 +

Jsfiddle demo

 html { height: 100%; } body { margin: 0; min-height: 100%; display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Safari */ display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } main { -ms-flex: 1; /* IE 10 */ -webkit-flex: 1; /* Safari */ flex: 1; background: lightgoldenrodyellow; } header, footer { background: lightseagreen; } 
 <header>header</header> <main>main</main> <footer>footer</footer>

Approach 2: The CSS table solution works for both known and unknown header and footer heights. Browser Support: IE8 +

Jsfiddle demo

 html, body { height: 100%; } body { display: table; width: 100%; margin: 0; } .header, .main, .footer { display: table-row; } .header, .footer { background: lightseagreen; } .main { height: 100%; background: lightgoldenrodyellow; } 
 <div class="header">header</div> <div class="main">main</div> <div class="footer">footer</div>

Approach 3: The position solution only works for a known header and footer heights. Browser Support: IE7 +

Jsfiddle demo

 html { position: relative; min-height: 100%; } body { background: lightgoldenrodyellow; margin: 20px 0; } .header, .footer { background: lightseagreen; position: absolute; left: 0; width: 100%; height: 20px; } .header { top: 0; } .footer { bottom: 0; } 
 <div class="header">header</div> <div class="main">main</div> <div class="footer">footer</div>
0
source

Using fixed values ​​for the header and footer is simple. Suppose you have a value of 60 pixels on the header and footer and place them sticky (fixed) on the top and bottom, you have the following code:

 .header { position: fixed; top: 0; right: 0; left: 0; height: 60px; } .footer { position: fixed; bottom: 0; right: 0; left: 0; height: 60px; } .content { position: absolute; top: 60px; bottom: 60px; left: 0; bottom: 0; /*Now, if you need your content to overflow properly when higher than the space provided by the screen you may add: overflow-y: scroll; and a scrollbar will show up */ }

If you need the header and footer as%, then you need to set the html and body heights to 100% and set the header and footer for .content according to the corresponding% values. You might consider adding html and body to the first part of the css code to follow the cascading rule of your elements on the page. And the body should be margin: 0;

Working with absolute and fixed positions and adding left: 0 and right: 0 to all your elements, you skip width values.

Overflow example here: http://codepen.io/desginarti/pen/OVbBoe

-1
source

Here's a quick tip for creating sensitive elements that maintain aspect ratio as they scale.

However, when we specify the bottom margin value for the same element, the fill dimension is calculated relative to the width of the elements:

 .rect { width: 100%; height: 0; padding-bottom: 50%; }

The correct aspect ratio

You will notice that I set the height height property to 0 to ensure that the height of any children will not be added to the fill value when calculating the visible height.

Note on children

If you also want to specify the height based on percentages for the child, you will need to assign the absolute or relative value of the position to both the parent and the child:

 .rect { position: relative; width: 100%; height: 0; padding-bottom: 50%; } .rect p { position: absolute; margin: 0; height: 100%; }

Open demo

-1
source

Try it,

HTML

 <div class="pagewidth"> <header> </header> <section class="wrapper"> </section> <footer> </footer> </div>

CSS

 html,body{ height: 100%; background: black; margin:0; padding:0; } *{ box-sizing: border-box; } .pagewidth{ position: relative; height: 100%; min-height:100%; } header{ background: green; position: absolute; left:0; top:0; width:100%; height: 30px; z-index:2; } .wrapper{ background: black; position: absolute; left:0; top:0; z-index:1; width:100%; height:100%; padding: 30px 0; } footer{ background: blue; position: absolute; left:0; bottom:0; width:100%; height: 30px; z-index:2; }

https://jsfiddle.net/rtwLe6zu/

-1
source

Source: https://habr.com/ru/post/988010/

More articles:


All Articles