Question

我有容器A.

我希望容器A在容器B后面。

容器A的高度必须等于容器B的高度。

他们的宽度是固定的。

容器A的阴影不得影响容器B的边界。

目前，我尝试使用绝对定位但不知道如何解决高度问题。

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tslint = require('gulp-tslint');
var rename = require('gulp-rename');
var del = require('del');

var tsProject = ts.createProject('tsconfig.json');
var tsSources = ['app/**/*.ts', 'app/**/*.tsx'];

gulp.task('clean', function() {
  return del(['built']);
});

gulp.task('build', ['clean'], function() {
  return gulp.src(tsSources)
    .pipe(ts(tsProject)).js
    .pipe(rename({extname: '.js'}))
    .pipe(gulp.dest('built'));
});

gulp.task('tslint', ['clean'], function() {
  return gulp.src(tsSources)
    .pipe(tslint())
    .pipe(tslint.report('msbuild', {
      emitError: false,
      summarizeFailureOutput: false
    }));
});

gulp.task('watch', ['build', 'tslint'], function() {
  return gulp.watch(tsProject.config.filesGlob, ['build', 'tslint']);
});

gulp.task('default', ['build', 'tslint']);

上面的代码做了我想要的，只是A的边框被B的阴影弄乱了。

Answer 1

我可能错了，但不应该像这样容易：

＆＃13;

#A {
  padding: 1px;
  -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 1);
  -moz-box-shadow:    0px 0px 8px 2px rgba(0, 0, 0, 1);
  box-shadow:         0px 0px 8px 2px rgba(0, 0, 0, 1);
  max-width: 200px;
}
#B {
  padding: 1em;
  border: 2px solid red;
}

＆＃13;

<div id="A">
  <div id="B">
    Text<br />
    Text
  </div>
</div>

＆＃13;

您在#A和#B之间看到1px的空格，您可以通过将#A的填充设置为零来丢失它。

Answer 2

将容器A和B放入一个新容器中（我们称之为C）并将绝对位置应用于A＆amp; B高度100％。容器C需要相对位置

.container-C {
   position: relative;
}
.container-A, .container-B {
    position: absolute;
    height: 100%;
}

现在A和B将具有相同的高度（C的高度）。将B＆B的内容带入＆＃34; front＆＃34;或者在A上，将z-index添加到两者（更多到B）

.container-A {
  z-index: 1;
}
.container-B {
  z-index: 2;
}

父匹配背后的CSS子容器匹配高度

2 个答案: