how to have a max height on my div.main class

Question

on my website (using zenphoto and boostrap 3), I have an issue on my div.main class. http://test.vincentbourganel.fr

I have static navbar and a fixed footer on the bottom. I want the div.main have "a height of 100% of the rest of the remaing place". It doesn't work when my content don't take all the remaing height.

See this page as example : http://test.vincentbourganel.fr/page/contact/

Can you help me to slove this issue

Please post your code in a [**Minimal, Complete, and Verifiable example**](https://stackoverflow.com/help/mcve) as ones your linked site changes or is dead the question becomes redundant and is most likely not going to be of help to anyone else. — Nope, Jun 23 '17 at 15:34
as example; you can consider this code from bootply: https://www.bootply.com/eW319k9Sh7 I want
to stick the footer in case of content is too small to fill the page. — vincent3569, Jun 26 '17 at 05:57

score 1 · Answer 1 · answered Jun 23 '17 at 15:40

1

Not sure how you feel about this solution and I'm more a back end developer than front end guy but you could always do something like

calc(100vh - (HEIGHT_OF_HEADER + BORDER) - (HEIGHT_OF_FOOTER + BORDER)

Only thing I don't like about this solution is I can't think of a way to do it without hard coding the heights in there. I'm sure there's a way to grab it but for now this should get you going in the right direction.

answered Jun 23 '17 at 15:40

Michael Platt

1,297
12
25

I found a way to do that in a side js file, with something like that : `$(window).resize(function() { // Full height page - minus "header" and "footer" height $('.full-page').innerHeight($(window).height() - $('#header').innerHeight() - $('#footer').innerHeight()); }).resize();` – vincent3569 Jun 26 '17 at 12:01

LKG · Answer 2 · 2017-06-23T16:27:28.357

You can get it by using flex, I created a box class and assigned flex as a property, then use flex:1 0 0 to content part, I used position to footer to stay in bottam, and assigned overflow:auto to content part div.

below i posted a working example to understanding

Flex - Flex Guide

Working Fiddle

body {
  margin: 0px;
  padding: 0px;
}

.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.header {
  background: tomato;
}

.content {
  flex: 1 0 0;
  background: green;
  overflow: auto;
}

.footer {
  background: blue;
  position: relative;
}

<div class="box">
  <div class="header">
    Header
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam
    mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam
    alias dicta, excepturi quod sed delectus veniam?<br><br>
  </div>
  <div class="footer">
    Footer
  </div>
</div>

Thanks I will consider your code. Before that, I have a question : what is backward compatibility for flex property with older browsers? As far I know, Bootstrap 3.x don't use it (it prefers table property ) and bootstrap 4 (alpha version) has been rewrited to implement flex property. — vincent3569, Jun 26 '17 at 06:04
You can read here about `flex` to get better knowledge https://developer.mozilla.org/en/docs/Web/CSS/flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — LKG, Jun 26 '17 at 06:06
If you consider IE browser then IE-8 or earlier not supported and rest browsers is comfortable with `flex` using `prifix` like `-webkit-` and some of more — LKG, Jun 26 '17 at 10:16

score 0 · Answer 3 · answered Jun 23 '17 at 16:13

0

you can use following code to adjust the height of main div. It will display on full screen if the content is less.

.main{ min-height: 100vh; }

answered Jun 23 '17 at 16:13

vincent3569 · Answer 4 · 2017-06-27T08:03:24.670

I found a way to do what I want in my js file. My JS code fix min-height of my main div to fill the screen even if main content is small one.

this code is working fine to suit my need :

jQuery(document).ready(function() { // full height for main div (windows height - "header" height - "footer" height) $(window).resize(function() { $('#main').css('min-height', $(window).height() - $('#menu').outerHeight() - $('#footer').outerHeight()); }).resize(); });

You can see it in action there : http://test.vincentbourganel.fr/

how to have a max height on my div.main class

4 Answers4