Question

我正在一个非常动态内容的网站上工作，该网站需要重排并适应不断变化的内容。其中一个主要要求是有一个页眉和页脚（也有不同长度和高度的动态内容），并且它们之间的内容总是占用它们之间留下的任何空间。

使用表格，这是微不足道的：

<table>
  <tr><td>Header</td></tr>
  <tr class="content"><td>Content</td></tr>
  <tr><td>Footer</td></tr>
</table>

table { height: 100%; }
tr.content { height: 100%; }

将这样的桌子粘贴到任何容器中（如果我们正在谈论顶级页面布局，请包括视口）以及它，满足要求，完成工作。

但是对于我的生活，我似乎无法通过CSS找到一种方法。我会想到，自从我第一次开始刺激＆＃34;整个HTML内容以来的15年多以来，与其他事物相关的大小调整这样的基本事情现在已经被提炼到接近完美，但是似乎并非如此。

我错过了什么吗？使用表来布局页面感觉非常错误（甚至当它到达内容的子表时更是如此），但如果唯一的其他选项是JavaScript，那么我宁愿回到90年代的HTML。< / p>

以下是使用上面显示的HTML + CSS实现我需要的Codepen：http://codepen.io/modo_lv/pen/PqBrRy?editors=110

Answer 1

以下是两个选项：

使用divs instead of tables并使用表格布局CSS，例如

display: table; display: table-row; display: table-cell;
使用Flexbox。

Answer 2

如上所述，Paul Redmond ...... flexbox同样微不足道

＆＃13;

div {
  border: 1px solid grey;
  margin: 25px;
}
.container {
  height: 250px;
  width: 350px;
  display: flex;
  flex-direction: column;
}
header,
footer {
  flex: 0 0 auto;
  background: lightgrey;
}
main {
  flex-grow: 1;
  background: lightblue;
}

＆＃13;

<div class="container">
  <header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ab.</header>
  <main></main>
  <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quidem similique voluptates! A libero accusantium ut, autem ad eos natus accusamus alias ab, velit labore!</footer>
</div>

＆＃13;

Codepen Demo

Answer 3

键入以下代码并以.html格式保存。我认为它会对你有帮助。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
    <style>
.div1 {
    border: 3px solid #052d31;
    position: relative;
    clear: left;
    float: left;
    margin: 3px;
    }
   </style>

    <div class="div1">
        <p>change this text the div will resize dynamically</p>
    </div>

    <div class="div1">
        <p>change this text</p>
    </div>
</body>
</html>

有没有办法在不使用表格的情况下进行HTML布局？

3 个答案: