受同级 DIV 的孩子影响的 DIV 定位

Question

我很难理解 CSS 如何在页面上布置元素。这是我试图实现的布局草图：

在canvas-column-1 内部，我想添加一个画布元素，即它是canvas-column-1 的子。但是，当我这样做时，我发现这会移动 canvas-column-2 的位置，这是 canvas-column-1 的 sibling 所以我预计它会不会受到任何子元素的影响它的兄弟姐妹：

CSS：

:root {
  --header-height: 100px;
  --footer-height: 20px;
  --header-background: cornflowerblue;
  --column-1-width: 200px;
}

.header {
  height: var(--header-height);
  min-height: var(--header-height);
  max-height: var(--header-height);
  background-color: var(--header-background);
}

.main-content {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  min-width: 100vw;
  max-width: 100vh;
  width: 100vw;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
}

.footer {
  min-height: var(--footer-height);
  max-height: var(--footer-height);
  background-color: var(--header-background);
  position: absolute;
  top: calc(100vh - var(--footer-height));
  left: 0;
  right: 0;
}

.column-1 {
  min-width: var(--column-1-width);
  max-width: var(--column-1-width);
  width: var(--column-1-width);
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  background-color: indianred;
  /* display: none; hidden and does NOT take up space. */
  /* -OR USE- */
  /* visibility: hidden; Hidden but still takes up space. */
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.column-2 {
  min-width: calc(100vw - var(--column-1-width));
  max-width: calc(100vw - var(--column-1-width));
  width: calc(100vw - var(--column-1-width));
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  background-color: blueviolet;
  display: inline-block;
  position: absolute;
  top: 0;
  left: var(--column-1-width);
}

.canvas-column-1 {
  display: inline-block;
  min-width: 50%;
  max-width: 50%;
  width: 50%;

  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  height: calc(100vh - var(--header-height) - var(--footer-height));

  background-color: antiquewhite;
}

.canvas-column-2 {
  display: inline-block;
  min-width: 50%;
  max-width: 50%;
  width: 50%;

  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  height: calc(100vh - var(--header-height) - var(--footer-height));

  background-color: darkgray;
}

.left-canvas {
  width: 200px;
  height: 200px;
  border: 4px dashed darkblue;
}

HTML

<div>
  <div class="header" >This is the header</div>
  <div class="main-content">
    <div class="column-1"></div>
    <div class="column-2">
      <div class="canvas-column-1">Canvas Column 1
        <canvas #leftCanvas class="left-canvas" height="200px" width="200px"></canvas>
      </div>
      <div class="canvas-column-2">Canvas Column 2</div>
    </div>
  </div>
  <div class="footer" ></div>
</div>

我使用了很多absolute 定位，主要是因为我发现当涉及到canvas-column-1 和canvas-column-2 的绝对定位时，它们相对于它们还需要一个非静态父元素，否则它们会位置或尺寸不正确。请注意，这个例子是为了让我了解 CSS 如何定位和布局元素。

这是一个jsfiddle of the example，但它又呈现出完全不同的东西

Answer 1

:root {
    --header-height: 100px;
    --footer-height: 20px;
    --header-background: cornflowerblue;
    --column-1-width: 200px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, #container {
    height: 100%;
}

#container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.header {
    background-color: cornflowerblue;
}

.main-content {
    height: 100%;
    display: flex;
}

.footer {
    background-color: cornflowerblue;
    height: var(--footer-height);
}

.column-1 {
    background-color: indianred;
    flex: 1;
}

.column-2 {
    background-color: blueviolet;
    flex: 6;
    display: flex;
}

.canvas-column-1 {
    background-color: antiquewhite;
    flex: 1;
}

.canvas-column-2 {
    background-color: darkgray;
    flex: 1;
}

.left-canvas {
    width: 200px;
    height: 200px;
    border: 4px dashed darkblue;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="container">
        <div class="header">This is the header</div>
        <div class="main-content">
            <div class="column-1"></div>
            <div class="column-2">
                <div class="canvas-column-1">Canvas Column 1
                    <canvas #leftCanvas class="left-canvas" height="200px" width="200px"></canvas>
                </div>
                <div class="canvas-column-2">Canvas Column 2</div>
            </div>
        </div>
        <div class="footer"></div>
    </div>
</body>

</html>

Answer 2

我不记得我在文档中的哪个位置阅读过此内容（我稍后会查找），而且我可能记错了。

replaced elements 指示文本行在行内级别布局中的位置，由vertical-align 属性控制，默认情况下它设置为基线，如果您要在适当的元素上更改vertical-align，它应该修复它。

编辑

The appropriate doc

解释

来自文档

一个线框总是足够高，可以容纳它所包含的所有框。但是，它可能比它包含的最高框高（例如，如果框对齐以便基线对齐）。当框 B 的高度小于包含它的行框的高度时，B 在行框内的垂直对齐方式由 'vertical-align' 属性决定。

被替换的元素实际上并不决定行的位置，而是因为它们可以内联并位于文本旁边，而且由于它们通常比文本高，这就是为什么它将所有内容都向下推。

如果你愿意，你可以降低画布的高度并看到线条向上移动。

---

inline-block 布局还有一个不同的问题，即标记中的空格和换行符不会被忽略，因此可用空间的手动计算不会按预期工作。

你可以阅读更多关于How do I remove the space between inline/inline-block elements?

---

这是一个演示

看看.canvas-column-1 和.canvas-column-2 是如何不隔开的，这解决了.canvas-column-2 列不适合在同一行上的问题。

:root {
  --header-height: 100px;
  --footer-height: 20px;
  --header-background: cornflowerblue;
  --column-1-width: 200px;
}

.header {
  height: var(--header-height);
  min-height: var(--header-height);
  max-height: var(--header-height);
  background-color: var(--header-background);
}

.main-content {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  min-width: 100vw;
  max-width: 100vh;
  width: 100vw;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
}

.footer {
  min-height: var(--footer-height);
  max-height: var(--footer-height);
  background-color: var(--header-background);
  position: absolute;
  top: calc(100vh - var(--footer-height));
  left: 0;
  right: 0;
}

.column-1 {
  min-width: var(--column-1-width);
  max-width: var(--column-1-width);
  width: var(--column-1-width);
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  background-color: indianred;
  /* display: none; hidden and does NOT take up space. */
  /* -OR USE- */
  /* visibility: hidden; Hidden but still takes up space. */
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.column-2 {
  min-width: calc(100vw - var(--column-1-width));
  max-width: calc(100vw - var(--column-1-width));
  width: calc(100vw - var(--column-1-width));
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  background-color: blueviolet;
  display: inline-block;
  position: absolute;
  top: 0;
  left: var(--column-1-width);
}

.canvas-column-1 {
  display: inline-block;
  min-width: 50%;
  max-width: 50%;
  width: 50%;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  height: calc(100vh - var(--header-height) - var(--footer-height));
  background-color: antiquewhite;
}

.canvas-column-2 {
  display: inline-block;
  min-width: 50%;
  max-width: 50%;
  width: 50%;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  height: calc(100vh - var(--header-height) - var(--footer-height));
  background-color: darkgray;
}

.left-canvas {
  width: 200px;
  height: 200px;
  border: 4px dashed darkblue;
}


 /* Solution */
.canvas-column-2{
  vertical-align:top;
}

<div>
  <div class="header">This is the header</div>
  <div class="main-content">
    <div class="column-1"></div>
    <div class="column-2">
    <div class="canvas-column-1">Canvas Column 1
        <canvas #leftCanvas class="left-canvas" height="200px" width="200px"></canvas>
      </div><div class="canvas-column-2">Canvas Column 2</div>
    </div>
  </div>
  <div class="footer"></div>
</div>