Question

我想只显示100％的网页。如果浏览器高度改变，我会看到孔页。在页面的末尾是一个固定的页脚，有三种不同的大小（可由JS更改）。如果页脚展开，内容应该缩小。

HTML：

turbolinks: 'false'

CSS：

<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>

JS（Jquery）：

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

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

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

fixedFooter schould具有相同（可变）宽度的#page
如果100％的高度已满，flexContent应该有ScrollBars（垂直和水平）
flexContent
如果可能的话，如果fixedFooter有100％

我已经尝试了很多，但我没有为我找到解决方案。也许flex是我不知道的正确方法。我对任何解决方案都持开放态度，但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：
在Css：#fixedFooter {width: 500px;}

2.如果100％的高度已满，flexContent应该有ScrollBars（垂直和水平）：
在Css中：#flexContent {overflow: auto;}

3.如果页脚有20px或200px，则必须显示flexContent：
在这里你有几个解决方案，放在Css z-index高于页脚，你可以调整大小取决于页脚大小，就像你在JS中所做的那样。

4.如果它也可能，如果fixedFooter有100％，＃topFixed内容应该是可见的：
不要再用100％的页脚。

如果我误解了某些事情，请告诉我，我可以纠正它希望它有所帮助。

一个“固定”<div> -Tag（页脚）调整另一个的高度

2 个答案: