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

Raman Balyan 发表于 Dev

拉曼·巴利扬（Raman Balyan）

我想要达到上载图片中提到的预期结果。这是两种视图的解释：

我一直希望区域A和区域C之间的边距为20px。如果屏幕尺寸发生变化，则区域C应填满间隙（如视图2所示），使区域A和区域C之间的边距始终保持20px。当前，每当屏幕尺寸发生变化时，区域A和区域C之间的间隙就会增大或减小我不希望它由C区填充。

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

注意：我想仅通过CSS来实现。没有Java语言。

罗伊

该flexbox属性在这里派上用场。在Mozilla Developer Network或CSS-Tricks上了解有关它的更多信息。

的CSS3弹性盒，或Flexbox的，是提供用于一个页面，使得元件的行为可预测当页面布局必须适应不同的屏幕尺寸和不同的显示装置上的元件的配置的布局模式。对于许多应用程序，柔性盒模型提供了一种对块模型的改进，因为它不使用浮点数，也不会使用弹性容器的边距随其内容的边沿收缩。

我复制了您提供的图像，并将内容与页脚的比例设置为4：1（或值的80％至20％）。请查看下面的代码，并确保检查出全屏版本以确保其正常运行，或者检查此JSFiddle。您可以根据需要更改值，但主要部分是这样的：

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

它会在各种子元素中重复出现，以适应需要。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-26

我来说两句

0条评论

登录后参与评论

上一篇：在Tarantool中何时使用光纤以及何时使用辅助例程？

来自分类Dev

Related 相关文章

文章

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

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

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

如何使页脚固定在底部？

底部最小高度的页脚

如何使用自动布局调整固定宽度和高度的UIImageView的大小

如何调整 UITextView 的大小，当达到特定值时，它会根据内容和固定宽度自动调整其宽度和高度？

如何使用“ position：absolute”将页脚固定在div的底部？

如何使用绝对位置将页脚固定在底部？

底部的页脚-高度为100％

DataGridView自动高度-如何自动调整DataGridView的高度？

根据高度将网站页脚固定在页面底部还是下方？

固定页脚始终必须位于底部，并响应窗口大小调整

如何使自动调整大小（高度）的UITableViewCell？

如何使CSS包装器自动调整高度？

如何根据容器高度自动调整菜单高度

如何定位底部页脚？

如何修复底部的页脚？

UITableView的自动调整高度

UICollectionView自动调整高度

HTML自动高度调整

自动调整高度的UITableView

自动调整div的高度

将页脚底部放到100％的高度

使用Bootstrap 3使页脚固定在底部

不要将页脚固定在底部

页脚未固定在页面底部

用tailwindCSS将页脚固定在底部

粘性flexbox页脚未固定到底部

在页面底部或文本下方固定页脚

Bootstrap Navbar固定的底部粘页脚