Question

我创建的面板很多次从我的页面边缘滑入，但它们通常会滑过页面内容或将页面内容从屏幕的相对边缘推出，而且它们会在屏幕的相对边缘滑动。通常是期望的效果。

我现在想要实现的是让一个从左侧滑入的面板，这样做既不会覆盖页面内容也不会将其推离屏幕，而是缩小页面内容的视口被展示。我的页面是响应式的，因此如果我手动调整浏览器窗口的大小，使其缩小一点，页面上的所有内容都会很好地调整大小。这是我想要通过我在面板中滑动实现的效果，让所有页面内容都可见且功能正常，但只是在一个稍窄的视口中，新面板占用了剩余的宽度。

我已经尝试了各种方法，但到目前为止还没有任何工作。我试着想一下哪些示例代码可能有用，但是因为我没有任何远程工作的东西，而且我所描述的是理论上非常简单的，希望这个描述会很简单。就足够了。

Answer 1

我的建议是在身体标签上使用display: flex;。

示例：

$('.nav-open').click(function(e) {
  $("#sidebar").toggle("slide");
});

body {
  background-color: white;
  font-family: sans-serif;
  text-align: center;
  padding-top: 30px;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  margin: 0;
}
#mainContent {
  background-color: red;
  height: 250px;
  width: 100%;
}
/*For the sidebar*/

.nav-open {
  height: 30px;
  position: absolute;
  cursor: pointer;
  z-index: 2;
  top: 0;
  background-color: gray;
}
div#sidebar {
  min-width: 50%;
  background-color: #d4d2cb;
  display: none;
  min-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-open">
  Open Sidebar
</div>
<div id="sidebar">
  Sidebar
</div>
<div id="mainContent">This is the main page</div>

滑入面板以缩小视口

1 个答案: