我正在使用语义用户界面。我正在设计的页面两侧有两个固定菜单，中间有一个内容容器。
如果我在两侧使用两个固定菜单，在调整窗口大小时中间的容器会被它们覆盖。
像这样:
考虑到在两边都有两个元素占据自己的空间，我希望容器能够调整大小。
如何让容器在窗口缩小时正确调整大小？
这个片段有一个来自 semantic-ui 网页的例子。它在两侧都有两个固定菜单，容器也有同样的问题，它被它们覆盖了。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/menu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/item.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.css" />
<script src="semantic/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.js"></script>
</head>
<div>
<div class="ui left fixed vertical menu">
<div class="item">
Item
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<div class="ui right fixed vertical menu">
<div class="item">
Item
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<p></p>
<p></p>
<div class="ui container">
<h1> I can't seee thiiiiiissss</h1>
</div>
<div>最佳答案
因为两个侧边栏都有固定的宽度(每个 15rem)你可以使用 calc为内容容器设置计算宽度。有了这个，您将覆盖所有桌面显示器(低至 768px 宽)，但看起来这个 Semantic-ui 有自己的断点来动态更改容器的宽度，所以任何分辨率低于 768px 的显示器都会再次打破它。但这并不是那么不幸，因为你不会在这么小的屏幕上同时显示这两个侧边栏，是吗？你知道，那里没有空间容纳它们。
div.ui.container {
width: calc(100% - 30rem);
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/menu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/item.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.css" />
<script src="semantic/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.js"></script>
</head>
<div>
<div class="ui left fixed vertical menu">
<div class="item">
Item
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<div class="ui right fixed vertical menu">
<div class="item">
Item
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<p></p>
<p></p>
<div class="ui container">
<h1> I can't seee thiiiiiissss</h1>
</div>
<div>关于javascript - 如何在不被固定菜单覆盖的情况下使容器在减小窗口大小的情况下正确调整大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41154208/