使边栏以最大宽度逐渐减小答案

【问题标题】：Make side bars reducing with max-width by degrees使边栏以最大宽度逐渐减小
【发布时间】：2020-06-02 21:26:43
【问题描述】：

如何使网页的侧面部分随着整个页面的宽度逐渐减小而减小宽度？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 10% 80% 10%;
            min-height: 100vh;
        }
        .side-right {
            background: red;
        }
        .side-left {
            background: blue;
        }
        .main {
            background: green;
        }
        @media screen and (max-width: 1000px) {
            .container {
                grid-template-columns: 0 100% 0;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="side-right">
    </div>
    <div class="main">
    </div>
    <div class="side-left">
    </div>
</div>
</body>
</html>

在下面的示例中，在 max-width = 1000px 后边元素立即消失，但我想让它们减小它们的宽度，以响应在 max-width 上更改的每个像素。如何制作？

【问题讨论】：

根据this 的帖子，使用网格布局很难实现这一点。也许尝试使用 flex-layout。
没问题，但是如何使用 flex-layout 来实现呢？其实我不知道怎么做。

标签： html css flexbox css-grid

【解决方案1】：

如果我正确理解您的要求...将最初的 grid-template-columns 更改为

  grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;

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

 ::before,
 ::after {
  box-sizing: inherit;
}

.container {
  display: grid;
  grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;
  min-height: 100vh;
}

.side-right {
  background: red;
}

.side-left {
  background: blue;
}

.main {
  background: green;
}

@media screen and (max-width: 1000px) {
  .container {
    grid-template-columns: 0 1fr 0;
  }
}

<div class="container">
  <div class="side-right">
  </div>
  <div class="main">
  </div>
  <div class="side-left">
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用flex-box 为所有内容设置动画，并且只需更改您的一些 css。

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: row-reverse;
}
.side-right {
  background: red;
  width: 100%;
}
.side-left {
  background: blue;
  width: 100%;
}
.main {
  background: green;
  min-width: 600px;
}

这只是一个基本示例。考虑阅读更多关于 flex-box 的内容。

【讨论】：

看来我不清楚。我想说的是，侧面元素的行为必须像该网站“edukacja.pwr.wroc.pl/EdukacjaWeb/studia.do”上的行为。只需尝试按 f12 并调整页面的宽度。看看侧面元素的背景如何
好的，现在我知道你要做什么了

【解决方案3】：

尝试将min-with: 50px; 添加到.side-right 和.side-left 然后给他们两个z-index: 1; 所以他们不会躺在你的主楼下

希望有帮助

【讨论】：