如何自动调整底部固定页脚的高度

Question

I want to achieve the desired result as mentioned in the uploaded picture.我想达到上传图片中提到的预期结果。 Here is the explanation of both the views:以下是两种观点的解释：

I always want the margin between the area A and area C as 20px.我总是希望区域 A 和区域 C 之间的边距为 20px。 If the screen size changes, area C should fill up the gap (as shown in View 2) keeping the margin always 20px between area A and area C. Currently, whenever screen size changes the gap between area A and area C increase or decrease which I don't want rather it should be filled by area C.如果屏幕尺寸发生变化，区域 C 应填充间隙（如视图 2 所示），保持区域 A 和区域 C 之间的边距始终为 20px。目前，每当屏幕尺寸发生变化时，区域 A 和区域 C 之间的间隙就会增加或减少我不希望它应该由区域 C 填充。

index.html索引.html

<!DOCTYPE html>
  <html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Learn</title>
    <link href = "styles.css" rel = "stylesheet">
  </head>

  <body>
    <div style="text-align:center;">
      <div class="boxA">
        <h2>A</h2>
        <div class="boxD"><h2>D</h2></div>
        <div class="boxD"><h2>D</h2></div> 
      </div>
      <div class="boxB">
        <h2>B</h2>
      </div>
      <div class="boxC">
        <h2>C</h2>
      </div>
    </div>
  </body>
</html>

styles.css样式文件

html, body {
  margin:0;
  padding:0;
  width:100%; 
  height:100%;
}
body, h2{
  margin: 0;
}

.boxA{
  width: 500px;
  height: 580px;
  background-color: #006400;
  margin-top: 20px;
  margin-right: 20px;
  display: inline-block;
  margin-bottom: 0px;
}

.boxB{
  width: 300px;
  height: 350px;
  background-color: blue;
  display: inline-block;
}

.boxC{
  width: 100%;
  background-color: yellow;
  margin-top: 20px;
  position:absolute;
  bottom: 0px;
}

.boxD{
  width:220px;
  display: inline-block;
  background-color: red;
  margin-left:20px;
  float:left;
}

Note: I want to achieve this just by CSS.注意：我只想通过 CSS 来实现这一点。 No Javascript.没有Javascript。

Answer 1

The flexbox property comes in handy here. flexbox属性在这里派上用场。 Read more about it at Mozilla Developer Network or at CSS-Tricks .在Mozilla Developer Network或CSS-Tricks阅读更多相关信息。

The CSS3 Flexible Box , or flexbox , is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. CSS3 弹性框，或flexbox ，是一种布局模式，提供页面上元素的排列，以便当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素的行为可预测。 For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.对于许多应用程序，弹性盒模型提供了对块模型的改进，因为它不使用浮点数，弹性容器的边距也不会与其内容的边距一起折叠。

I reproduced the images you provided and set the ratio of the content versus the footer to 4:1 (or 80% to 20% in values).我复制了您提供的图像并将内容与页脚的比率设置为 4:1（或 80% 到 20% 的值）。 Please take a look at the code below and be sure to check out the full screen version to see it working properly, or check this JSFiddle .请查看下面的代码，并确保查看全屏版本以查看它是否正常工作，或查看此 JSFiddle 。 You can change the values to your needs, but the main part is this:您可以根据需要更改值，但主要部分是：

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  justify-content: flex-start;
}

It gets repeated in various child element to fit the needs.它在各种子元素中重复以满足需要。

 body, html { width: 100%; height: 100%; margin: 0; padding: 0; } .wrapper { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: stretch; align-content: stretch; justify-content: flex-start; } .container { display: flex; flex-flow: row wrap; height: 80%; width: 100%; background: lightgray; } .green { display: flex; flex-flow: row wrap; margin: 20px; width: 60%; background: lightgreen; } .box { width: calc(50% - 50px); margin: 20px; background: darkgreen; box-sizing: border-box; } .blue { margin: 20px; width: 30%; max-height: 50%; background: blue; } .footer { height: 20%; background: lightblue; }

 <div class="wrapper"> <div class="container"> <div class="green"> a <div class="box">d</div> <div class="box">d</div> </div> <div class="blue"> b </div> </div> <div class="footer"> c </div> </div>

如何自动调整底部固定页脚的高度

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-20 00:04:24

如何自动调整底部固定页脚的高度

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-20 00:04:24

解决方案1
1 已采纳 2016-03-20 00:04:24