小编sin*_*ise的帖子

我知道这个主题是满口的,但我找不到一个更好的方式来描述它.

我有一个标题,内容正文,页脚布局,其中页脚是'粘性'使用flex css,这非常有效.我在内容体中有另一个容器需要扩展以填充可用高度,当它的内容被追加时,它会滚动.到目前为止,我能够使用它的唯一方法是将内容体的高度设置为静态px值,这会破坏我所需的垂直响应性.

Codepen我的尝试:http://codepen.io/sinrise/pen/QwKPKp

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}
#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
  background: yellow;
  height: 30px;  /* can be variable as well */
}
#body {
  flex: 1;
  border: 1px solid orange;
  padding-bottom: 20px;
}
.content {
  border: 1px solid gray;
  margin: 10px 0 0;
  width: 500px;
  margin: 0 …

其他答案没有帮助。我在 Windows 10 上使用 Gulp 4。

运行“gulp serve”时出现以下错误

The following tasks did not complete: serve, sass
[18:48:51] Did you forget to signal async completion?

我的 gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('sass', function() {
    return sass('./public_html/lib/scss/main.scss')
        .pipe(gulp.dest('./public_html/css'))
        .pipe(reload({ stream:true }));
});
gulp.task('serve', gulp.series('sass', function() {
    browserSync({
        server: {
            baseDir: 'public_html'
        }
    });
    gulp.watch('lib/scss/*.scss', gulp.series('sass'));
}));