Question

我使用CSS + HTML创建了一些简单的网站。

在这个网站上，我已经级联了一系列div ..

体
- 页
  - 条目
    - 输入

所以我期望（1）BODY和PAGE都包含所有其他div，更重要的是（2）BODY和PAGE的高度至少跨越所有子div的总和..但是这并不是'发生了。这会对我理想的行为产生影响。

因此，我的问题是1和2为什么会发生？ CSS意味着层叠样式表，所以我希望级联更加明确。我很可能做错了什么......：

您可以在此处查看整个CSS和示例HTML：

public post(url: string, model: any): Observable<Response> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    //Create unique id for each ajax call
    let httpCallId = this.guidService.new();

    //Let Loading Box components that an ajax call has been triggered
    this.ajaxStarted.emit(httpCallId);

    let httpPost = this.http.post(url, JSON.stringify(model), options);

    //Let Loadinc Box Component know that ajax call has been completed
    httpPost.subscribe(success => { // <-------
        this.ajaxCompleted.emit(httpCallId);
    }, error => {
       this.ajaxCompleted.emit(httpCallId);
    });

    return httpPost;
}

感谢

Answer 1

由于子元素正在浮动，您必须在父div上指定display: inline-block;，以便将这些元素考虑在内：

JS Fiddle - （添加了蓝色背景以显示它占据所有子元素的高度）

.page {
  line-height: 1.3rem;
  margin-top: calc(1.5rem + 1%);
  margin-bottom: calc(1.5rem + 1%);
  margin-left: calc(1.5rem + 2%);
  margin-right: calc(1.5rem + 2%);
  display: inline-block;
}

没有display: inline-block;： JS Fiddle

另外，对于你的第一个问题，身体已经占据了整个身高（黄色背景是身体）：JS Fiddle

CSS正文和其他div不使用全高

1 个答案: