【问题标题】：How to make layout like facebook ? Using html css (flexbox)如何制作像 facebook 一样的布局？使用 html css (flexbox)
【发布时间】：2022-01-24 15:59:43
【问题描述】：

我想制作一个具有以下功能的布局（如 facebook）：

固定/粘性页眉和无页脚
3 格，其中div1:div2:div3 = 1:2:1
3个滚动条来控制每个div... scroll-1 和 scroll-3 将在 div-1 和 div-3 内部控制各自的内容，scroll-bar-2 将在主体的最右侧控制 div-2 的内容
完整的固定页面，没有额外的滚动条，检查在每个 div 中添加 lorem1000

请帮我做这个布局...提前谢谢你

我写的html代码

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <title>test</title>
</head>

<body>
    <nav>
        <h1>This is nav</h1>
    </nav>
    <div class="row">
        <div class="col-3">lorem1000</div>
        <div class="col-5">lorem1000</div>
        <div class="col-3">lorem1000</div>
    </div>
</body>
</html>

请帮我做这个布局...提前谢谢你

【问题讨论】：

标签： html css flexbox frontend

【解决方案1】：

我看到你关于你的想法的照片，我查看了你的html

使用 CSS 网格

使用css grid 你只在父元素中编写代码:)

在这个例子中 .row 里面有 3 个孩子

所以现在我使用你之前写的名字类（.col-3，.col-5）

并将宽度分成相等的部分 (fr)，我将侧边栏放置在屏幕的 3 个部分，而 mainDiv 删除了 5 个部分......所以 mainDiv 比边栏大。

响应式，你可以随意更改fr的值（记住第一个值必须和最后一个相同，中间值必须大于侧边栏）

  display: grid;
  grid-template-columns: 3fr 5fr 3fr;

body {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.5rem;
}

.row {
  gap: 0.5rem;
  display: grid;
  grid-template-columns: 3fr 5fr 3fr;
}

nav,
.row>div {
  border-radius: 0.3em;
  border: 1px solid rgb(0, 51, 255);
}

.col-3 {
  overflow: scroll;
}

<!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>
  <nav>
    <h1>This is nav</h1>
  </nav>
  <div class="row">
    <div class="col-3">sideBar</div>
    <div class="col-5">mainContent</div>
    <div class="col-3">sideBar</div>
  </div>
</body>

</html>

【讨论】：

好的。我现在将编辑它@j08691
@j08691 已编辑。
非常感谢亲爱的，它大部分时间都在工作......但我需要修复整个页面，最右边的滚动条将控制中心 div 的内容......我在每个页面中添加了 lorem1000 div，根据您的代码，当滚动最右边的滚动条时，整个页面正在移动。我只想滚动最右边的滚动条的中心 div，所有页面都将保持固定。最好的例子是 FACEBOOK 的布局。 .请检查..再次感谢..