Resize window dynamically based on div heights

Question

I want to resize my window height based on the screen size dynamically, so this (first image) won't happen:

Below are my HTML and jQuery - Is there a way to do it without adding the pageContent div around everything? And, if possible, in a more concise/ cleaner way. Thanks!

$(document).ready(function() {

  var divH = $(".newRow").outerHeight();
  var numDivs = $(".newRow").length;
  var contentH = $(".pageContent").height(divH * numDivs + 10);

  var footerH = $(".page-footer").height() + 12;
  var headerH = $(".mainMenu").height();


  $(window).resize(function() {
    $(contentH).height($(window).height() - footerH - headerH);
  });

  $(window).trigger('resize');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContent">
  <div class="row cingapura newRow narrow simpleDoubleIcon">
    <div class="rowOne faq">
      <h3>Dúvidas frequentes </h3>
    </div>
  </div>

  <div class="row cingapura newRow narrow simpleDoubleIcon">
    <div class="rowOne turnOn">
      <h3>Religar serviço</h3>
    </div>
  </div>
</div>

I don't get what you try to do. Resizing a mobile window is not possible. Can't you show us a screen of how it's supposed to look like? Do you want the footer to be sticky at the bottom? — Sarah Groß
– Sarah Groß, Commented Nov 1, 2017 at 14:06
@MathijsSegers you are right, that's exactly what I want to do, have the footer at the bottom, unless there is more content (so not sticky). However, using flex doesn't quite work for me because this is just an exemple screen of a very large mobile portal - not an app acctually - and using flex messed up the code for the rest of the portal, wich it would take hundreds of hours to fix. — Juliana Valverde
– Juliana Valverde, Commented Nov 1, 2017 at 14:17

Chetan S · Accepted Answer · 2017-11-01 14:24:24Z

1

You can do it using flexbox without Javascript

<body class="site">
  <main class="content">
    ...
  </main>
  <footer class="footer">
    ...
  </footer>
</body>

.site {
  display: flex;
  min-height: 100vh; /* set body height equal to viewport */
  flex-direction: column;
}

.content {
  flex: 1;  /* allow content to grow to remaining space */
}

Source

answered Nov 1, 2017 at 14:24

Chetan S

23.8k2 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shrugo · Accepted Answer · 2017-11-01 14:13:27Z

0

If you want to have footer always at the bottom, try this

.footerClass {
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
}

answered Nov 1, 2017 at 14:13

Shrugo

1573 silver badges10 bronze badges

Comments

lunjius · Accepted Answer · 2017-11-02 19:09:49Z

I guess your footer should always be at the bottom of the page. Therefore the body has to cover the whole screen height and then the footer needs to be aligned with the bottom. That all can be fixed via CSS.

CSS

body {
    position: relative;  // make body the element the footer can be aligned with
    min-height: 100%;  // body covers AT LEAST the whole screen, even if there is less content
    margin: 0;
    padding: 0;
}

#content {
    margin-bottom: XY; // see chapter "When JS is necessary"
}

footer {
    position: absolute;  // footer aligns absolute within related body
    bottom: 0;
    width: 100%;
}

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="content">
            I am content and don't want to be covered!!! <br>
            Thank you for paying attention on that, dear developer :*
        </div>
        <footer>My Footer is here</footer>
    </body>
</html>

When JS is necessary

Don't forget: The footer is going to overlay content at the bottom of the page. That's why you have to define space between the last bit of content and the page's end. The space needs to have at least the same height as the footer. If the footer's height is known and static, you can do this for example by wrapping your content and giving it a margin (as I did in the example above).
If the height changes and cannot be expressed by CSS, you have to use JS, too. Do it like the following.

JavaScript

function setContentSpace() {
    var footer = document.getElementByTagName("footer")[0];
    var content = document.getElementById("content");

    if (footer != null && content != null) {
        content.style.marginBottom = footer.offsetHeight + "px";
    }
}

Collectives™ on Stack Overflow

Resize window dynamically based on div heights

3 Answers 3

Comments

Comments

CSS

HTML

When JS is necessary

JavaScript

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

CSS

HTML

When JS is necessary

JavaScript

Comments

Your Answer

Sign up or log in

Post as a guest

Related