Question

关于页脚的行为，我有一个特殊的情况。

在浏览器窗口足够大的情况下，网站将如下所示：

请注意，页脚下方有一些空白：这正是我想要的，所以这种情况很好。

但是，当我调整浏览器窗口的大小时，显然会发生以下情况：

这不是我想要的。我想要的是页脚从窗口过小而无法容纳所有内容的那一刻起就停留在底部。

黄色的“内容”部分应缩小，但页眉和页脚应保持相同的大小，并且页脚应固定在底部。

我不确定该如何处理。我想我可以使用媒体查询，所以如果窗口大小小于Header + Content + Footer基本高度，那么我可以更改页脚的CSS吗？

Answer 1

这是如何使用javascript实现此行为的最小示例。

var header = document.querySelector('.header');
var content = document.querySelector('.content');
var footer = document.querySelector('.footer');

var resizeHandler = function () {
  document.body.classList.toggle('no-scroll', innerHeight > document.body.offsetHeight);
};

resizeHandler();
addEventListener('resize', resizeHandler)

body {
  margin: 0;
  padding: 0;
}

.header {
  border: 1px solid red;
}
.content {
  border: 1px solid yellow;
}
.footer {
  border: 1px solid cyan;
}

body.no-scroll {
  height: 99.9vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header"
                       "content"  
                       "footer"
}

body.no-scroll .header {
  grid-area: "header";
}
body.no-scroll .content {
  grid-area: "content";
}
body.no-scroll .footer {
  grid-area: "footer";
}

<div class="header">Title</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="footer">Footer</div>

Answer 2

使用CSS Flexible Box可以轻松实现所需的布局和行为。

<body>
    <header>Header</header>
    <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare est sit amet mauris venenatis, sit amet aliquet justo faucibus. Donec fringilla leo lacinia odio sollicitudin, id posuere justo feugiat. Nunc iaculis, justo ac placerat suscipit, nunc eros blandit justo, ut mattis libero felis vitae diam. Curabitur odio velit, porttitor bibendum sem sit amet, euismod commodo urna. Phasellus finibus fermentum purus at pellentesque. Ut ut felis et eros aliquam mattis. Vivamus quis consequat diam.</p>
        <p>Donec euismod tellus ex, eget venenatis est iaculis scelerisque. Fusce magna nunc, venenatis nec leo non, posuere tincidunt urna. Donec vel lacus sed eros dignissim pellentesque quis et purus. Donec in mauris mi. Praesent eget malesuada ante, a euismod nulla. Suspendisse tincidunt bibendum magna, accumsan mollis urna consequat varius. Curabitur sed ex magna. Quisque vestibulum purus nec leo rutrum accumsan.</p>
        <p>Pellentesque hendrerit consectetur leo, non maximus metus vehicula non. Donec faucibus lectus pretium vestibulum facilisis. Donec rhoncus ante vitae elit viverra commodo. Donec eu ornare sapien. Ut ut elit nulla. Phasellus at tortor a nulla malesuada bibendum. Phasellus non orci porta, porttitor magna in, dapibus magna. Mauris sed tellus sit amet augue rutrum vestibulum. Curabitur lobortis, magna vel maximus bibendum, mi nunc volutpat massa, eu pretium elit lorem id urna. Phasellus ullamcorper finibus quam, a venenatis felis hendrerit sit amet. Proin imperdiet, metus id dictum pretium, elit nisi ornare nisi, finibus condimentum libero velit ut sapien. Aenean in dui efficitur, laoreet neque eu, dictum mi. Curabitur eleifend mauris augue, eget placerat quam hendrerit a.</p>
    </section>
    <footer>Footer</footer>
</body>

以及CSS规则：

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    max-height: 100%;
}

body > section {
    overflow: auto;
}

仅当页面足够小时，才使页脚停留在底部

2 个答案: