一个"fixed"标签<div>(页脚)调整另一个标签的高度

Question

我想只显示100%的网页。如果浏览器高度发生变化，我会看到孔页面。页面末尾是一个固定的页脚，有三种不同的大小(可通过JS更改(。如果页脚展开，则内容应收缩。

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;
  }
});

我在Fiddle上的示例代码：https://jsfiddle.net/mnrp72ho/7/

在我的例子中有不同的问题：

• fixedFooter schould具有与#page相同(可变(的宽度
• 如果高度的100%已满，则flexContent应具有滚动条(垂直和水平(
• 如果页脚为20px或200px，则flexContent必须可见
• 如果可能的话，如果fixedFooter有100%，#topFixed内容应该是可见的

我已经尝试了很多，但我还没有找到适合我的解决方案。也许弹性是正确的方法，我不知道。我对任何解决方案都持开放态度，但topFixedContent和sizedContent必须在一起。

注意：我使用JQuery和Bootstrap。

Answer 1

好的，我已经通过JavaScript解决了我的问题。我的解决方案计算大小，并在调整大小后重新排序div容器。

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;
  }
});

CSS看起来像(感谢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;
}

Answer 2

所以我不太明白你想要什么，但我可以解决你的一些问题

1.fixedFooter schould具有与#page相同(可变(的宽度：
在Cs:#fixedFooter {width: 500px;}

2.如果高度的100%已满，则flexContent应具有滚动条(垂直和水平(：
Cs:#flexContent {overflow: auto;}

3.如果页脚有20px或200px，则flexContent必须可见：
这里有几个解决方案，在Css中放置一个比页脚高的z索引，你可以像在JS中那样根据页脚的大小调整大小

4.如果可能的话，如果fixedFooter有100%，#topFixed内容应该是可见的：
那就不要用100%的页脚

如果我做错了什么，请告诉我，我可以纠正。
希望能有所帮助。