Понимание того, почему ячейка таблицы не оборачивается на 100%. - PullRequest
Новая
       7

Понимание того, почему ячейка таблицы не оборачивается на 100%.

0 голосов
/ 20 января 2019

Оригинальный вопрос (РЕДАКТИРОВАНИЕ)

CSS: почему родной элемент ячейки таблицы с высотой 100% превышает тело строки таблицы

Я тестирую таблицу CSS. В одном из моих тестов я пытаюсь получить макет столбца одинаковой высоты.

  • Я хочу "в стороне" слева, который должен заполнить 100% высоты страницы (например, столбец).
  • Право "в сторону", я хочу "заголовок" над "основным" содержанием.
  • Я хочу, чтобы "header" и "main" заполняли 100% высоты страницы.
  • Я хочу, чтобы вся высота макета увеличивалась при увеличении их содержимого.

Вот мой тестовый пример: https://jsfiddle.net/264z0ovf/

Я установил «в сторону» в качестве ячейки таблицы и установил «основную» высоту на 100%. Это приводит к тому, что «main» имеет ровно 100% высоты своего родителя и переполняет нижнюю часть «body».

Можете ли вы объяснить, почему "main" со 100% высотой переполняет строку таблицы "body"?

Я не ожидал переполнения. Я думал, что «main» заполнит оставшееся пространство ниже «header» или таблицу, чтобы вырасти и обернуть всю высоту. 

html,
body {
  margin: 0;
  height: 100%;
}

html {
  display: table;
}

body {
  background-color: #0000ff;
  display: table-row;
}

aside {
  background-color: #00ff00;
  display: table-cell;
}

header {
  background-color: #909090;
}

main {
  background-color: #ffffff;
  height: 100%;
}
<html>

<body>
  <aside>ASIDE</aside>
  <header>HEADER<br>AND SOME CONTENT</header>
  <main>MAIN</main>
</body>

</html>

TL; DR

Я знаю, что процентная высота вычисляется из высоты родителя.
Так что если «основной» рост равен 100%, то это будет означать 100% «тела».

Рядом с "заголовком" находится анонимная ячейка таблицы , которая должна заключать "в сторону" и "main". Таким образом, строка таблицы тела также должна расти, когда растут ее клетки.
От https://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

Любой элемент таблицы автоматически сгенерирует необходимый аноним стол вокруг себя

Это еще один пример, когда «main» не переполняет таблицу: https://jsfiddle.net/80a53fvs/

  • Я добавил таблицу div высотой 100%, чтобы обернуть "header" и "main".
  • Я изменил "main" как строку таблицы и оставил ее высоту до 100%.

Это приводит к тому, что "main" заполняет оставшуюся высоту ниже "header" без переполнения таблицы. 

html, body {
  margin: 0;
  height: 100%;
}

html {
  display: table;
}

body {
  background-color: #0000ff;
  display: table-row;
}

aside {
  background-color: #00ff00;
  display: table-cell;
}

div {
  display: table;
  height: 100%;
}

header {
  background-color: #909090;
}

main {
  background-color: #ffffff;
  height: 100%;
  display: table-row;
}
<html>
  <body>
   <aside>ASIDE</aside>
    <div>
      <header>HEADER<br>AND SOME CONTENT</header>
      <main>MAIN</main>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 20 января 2019

добавлено 

body {
 overflow: hidden;
}


html,
body {
  margin: 0;
  height: 100%;
}

html {
  display: table;
}

body {
  background-color: #0000ff;
  display: table-row;
  overflow: hidden;
}

aside {
  background-color: #00ff00;
  display: table-cell;
}

header {
  background-color: #909090;
}

main {
  background-color: #ffffff;
  height: 100%;
}
<html>
  <body>
    <aside>ASIDE</aside>
    <header>HEADER<br>AND SOME CONTENT</header>
    <main>MAIN</main>
  </body>
</html>
...