代码之家 › 专栏 › 技术社区 › Eldy

只有当页面足够小时,才使页脚粘住底部

css html

Eldy · 技术社区 · 7 年前

我有一个关于页脚应该如何表现的特殊情况。

注意页脚下面有一些空白:这是我想要的,所以这个案子很好。

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

黄色的“内容”部分应该缩小,但是页眉和页脚应该保持相同的大小,页脚应该贴在底部。

我不知道怎么处理。我想我可以使用媒体查询,所以如果窗口大小小于页眉+内容+页脚底部高度,那么我可以更改页脚的CSS?

2 回复 | 直到 7 年前

rafaelcastrocouto 7 年前

下面是一个如何使用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>

Armen Michaeli 7 年前

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