我如何实现这个简单的盒子布局答案

【问题标题】：How do I achieve this simple boxes layout我如何实现这个简单的盒子布局
【发布时间】：2018-07-17 04:20:15
【问题描述】：

我正在尝试仅使用常规 CSS 显示属性（块、内联..）而不使用 flex 或网格来创建以下布局。

顶部的东西（bandeau）应该有 100px 的高度和 50px 的水平边距。

左右两列的宽度都应为 100 像素。

页脚 thingy(pied) 的高度应为 80 像素，水平边距为 75 像素。

body {
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100%;
}

.bandeau {
  height: 100px;
  background: white;
  margin: 0 50px;
}

.menuGauche {
  width: 50px;
  background: lightblue;
  height: calc(100% - 80px);
  margin: 0 0 80px 0;
  position: absolute;
}

.ecran {
  background: lightgreen;
  width: calc(100% - 100px);
  height: calc(100% - 80px);
  position: absolute;
  margin: 0 50px;
}

.menuDroite {
  width: 50px;
  background: lightblue;
  height: calc(100% - 80px);
  margin: 0 0 80px 0;
  position: absolute;
  left: calc(100% - 50px);
}

.pied {
  height: 80px;
  background: white;
  margin: 0 75px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

<div class="bandeau"></div>
<div class="menuGauche"></div>
<div class="ecran"></div>
<div class="menuDroite"></div>
<div class="pied"></div>

【问题讨论】：

标签： html css

【解决方案1】：

当我在做这种布局时，我会尝试将它们水平分组，这样两列就会被包裹在另一个 div 中。类似这样：

<!DOCTYPE html>
<html>

<head>
  <style>
    .main {
      background-color: black;
    }

.top {
  margin: 0 50px;
  height: 100px;
  background-color: white;
}

.mid {
  height: 500px;
  background-color: green;
}

.left-col,
.right-col {
  height: 100%;
  width: 100px;
  background-color: blue;
}

.left-col {
  float: left;
}

.right-col {
  float: right;
}

.bottom {
  margin: 0 75px;
  height: 80px;
  background-color: white;
}
  </style>
</head>

<body>
  <div class="main">
    <div class="top"></div>
    <div class="mid">
      <div class="left-col"> </div>
      <div class="right-col"> </div>
    </div>
    <div class="bottom"> </div>
  </div>
</body>

</html>

我使用了浮动并假设中间部分的高度没有指定。这是plunk。希望这会有所帮助！

【讨论】：

非常感谢，这是最好的答案，因为您没有使用 flexbox 或网格显示，但是，我不能真正为中间部分使用静态高度，它需要有一个动态的高度。所以 500px 并不是真正的答案。这是我唯一的问题。
当然！关于高度问题，我不确定您所说的动态高度具体是什么意思。但是，如果您希望它是动态的，我同意，您不能指定静态高度。在最初的问题中，您说要实现类似的布局，这就是我假设静态高度的原因。您可以进一步解释您的问题/场景，以便我们为您提供更多帮助。
高度由内容决定。所以那个绿色区域应该只有一个固定的宽度。

【解决方案2】：

作为初学者，你应该避免使用绝对定位，学习显示，然后浮动。

现在的 display flex 让它变得更容易了。

您也可以使用对它们所包含的内容有意义的标签。

这里是一个通过 flex 的例子：

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  display: flex;
}
.bandeau {
  height: 100px;
  background: white;
  margin: 0 50px;
}

.menuGauche {
  width: 50px;
  background: lightblue;
}

.ecran {
  background: lightgreen;
  flex: 1;
}

.menuDroite {
  width: 50px;
  background: lightblue;
}

.pied {
  height: 80px;
  background: white;
  margin: 0 75px;
}

<header class="bandeau"></header>
<main>
  <div class="menuGauche"></div>
  <div class="ecran">Play the snippet full page or play with:<a href="https://codepen.io/anon/pen/rJMrgz">https://codepen.io/anon/pen/rJMrgz</a>.</div>
  <div class="menuDroite"></div>
</main>
<footer class="pied"></footer>

这里有一个教程（除其他外）：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

（101条建议：法国读者https://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html）

【讨论】：

非常感谢您所做的一切。
这个问题可能有点过分了，但我有点希望不使用 flex 显示，这个练习的重点是避免使用 flex 或 grid 来解决问题，而是只使用块和行。

【解决方案3】：

您可以在某些元素上使用display:table 来实现结果。所以包装你的主要内容，然后将其显示为表格。

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

.bandeau{
    height: 100px;
    background: white;
    margin: 0 50px;
}
.content-wrapper {
    display: table;
    height: calc(100% - 180px);
    width: 100%;
}
.content-wrapper > div{
  display:table-cell;
}

.menuGauche,
.menuDroite{
    width: 100px;
    background: lightblue;
}

.ecran{
    background: lightgreen;
}

.pied{
    height: 80px;
    background: white;
    margin: 0 75px;
}

<body>

        <div class="bandeau"></div>

    <div class="content-wrapper">
      <div class="menuGauche"></div>
      <div class="ecran"></div>
      <div class="menuDroite"></div>
    </div>

      <div class="pied"></div>

</body>

【讨论】：

感激不尽。这正是我想要的。
我做到了，虽然只是记录没有显示（
但是你可以把它设置为正确答案:)，见stackoverflow.com/help/someone-answers