kayf kayf - 4 months ago 14
CSS Question

One "fixed" <div>-Tag (Footer) resize height of another

I want to show a webpage only on 100 percent. If the browser height changes I would seen the hole page. At the end of the page is a fixed footer with three different sizes (changeable by JS). If the footer expand the content should shrink.

HTML:

<div id="page">
<section id="content">
<div id="flexContent">
<div id="topFixedContent">
Content on top of the two flexible divs.
</div>
<div id="sizedContent">
This content have a fixed size. If ts too big scrollbars should be visible.
</div>
</div>
<div id="fixedFooter">
Footer with 3 different sizes inside content: 20px, 200px, 100%.
</div>
</section>
</div>


CSS:

body {
height: 100%;
}
#page {
height:100%;
width: 500px;
border-left: 2px solid grey;
border-right: 2px solid grey;
margin: auto;
}
#content {
height:100%;
width: 100%;
background-color:blue;
}
#flexContent {
heigth: 100%;
background-color:red;
overflow: hidden;
}

#topFixedContent {
height:20px;
background-color:yellow;
}

#sizedContent {
height:500px;
background-color:green;
border-bottom: 2px solid red;
}
#fixedFooter {
heigth: 20px;
width: 100%;
bottom: 0;
position: fixed;
background-color:orange;
}


JS (Jquery):

var counter = 0;
$( "#fixedFooter").click(function(){
if (counter == 0){
$("#fixedFooter").animate({height: "200px"});
counter++;
}
else if (counter == 1){
$("#fixedFooter").animate({height: "100%"});
counter++;
}
else if (counter == 2){
$("#fixedFooter").animate({height: "20px"});
counter = 0;
}
});


My example code on Fiddle: https://jsfiddle.net/mnrp72ho/7/

Inside my example are different problems:


  • fixedFooter schould have the same (variable) width of #page

  • flexContent should have ScrollBars (vertical & horizontal) if the 100% of hight are full

  • flexContent have to be visible if the footer have 20px or 200px

  • if it's possible too, #topFixed Content should be visible if fixedFooter have 100%



I have try a lot, but i haven't found a solution for me. Maybe flex is the right way i don't know. I am open for any solution, but topFixedContent and sizedContent hav to be together.

Notice: I work with JQuery and Bootstrap.

Answer

OK, I have solved my problem via JavaScript. My solution calculates the sized and after resize it reorder the div containers.

var counter = 0;
var resizeTimer;

window.onload = function(event) {
        rescaleContent();
};
window.onresize = function(event) {
    //Um die Anzahl der Funktions-Aufrufe zu verringern.
     if (resizeTimer) {
            clearTimeout(resizeTimer);
        }
    resizeTimer = setTimeout(function() {
        resizeTimer = null;
        rescaleContent();
    }, 200);  
};

function rescaleContent() {
    console.log("resize");
    footerHeight = $("#fixedFooter").height();
    var scrollHeigth = 10; 
    var newHeight = $(window).height() - footerHeight - $('#topFixedContent').height() - scrollHeigth;
        $("#flexContent").animate({height: newHeight});     
        $("#sizedContent").animate({height: newHeight});        
        $("#fixedFooter").animate({width: $("#page").width()});     
}

$( "#fixedFooter").click(function(){            
    if (counter == 0){
        $("#fixedFooter").animate({height: "200px"}).promise().then(function(){rescaleContent();});
    counter++;
  }
  else if (counter == 1){
        $("#fixedFooter").animate({height: "95%"}).promise().then(function(){rescaleContent();});
    counter++;
  }
  else if (counter == 2){
        $("#fixedFooter").animate({height: "20px"}).promise().then(function(){rescaleContent();});
    counter = 0;
  }
});

The CSS looks like (thank's to Stages):

html, body {
  height: 100%;
  overflow: hidden;
}
#page {
  position: relative;
  margin:0px auto;
  height: auto !important;
  min-height:100%;
  height:100%;
  width: 500px;
  border-left: 2px solid grey;
  border-right: 2px solid grey;
}
#content {
 width: 100%;
 height:100%;
 background-color:blue;
}
#flexContent {
  background-color:red;
}

#topFixedContent {
  height:20px;
  background-color:yellow;
}

#sizedContent {
  width: 100%;
  background-color:green;
  border-bottom: 2px solid red;
  overflow: auto;
  z-index: 5;
}
#fixedFooter {
  heigth: 20px;
  bottom: 0;
  position: fixed;
  background-color:orange;
  z-index: 1;
}