css 如何滚动的正文内容与侧菜单，并使其动态的小屏幕？

我应该怎么做才能使隐藏和显示侧边菜单时主体的内容是动态的？我正在尝试用PHP创建一个产品管理项目。
我已经创建了一个Side Menu ( Sidebar )，我使用了一个模板。侧菜单也有一个导航栏，其中包含我们用来隐藏和显示侧菜单的按钮。
通过php添加新页面或视图，我希望新添加的页面内容占据整个屏幕，并在左侧显示margin-left: 40px，当显示侧菜单时动态滚动当我添加新页面时，出现了两个问题：

新页面的内容将覆盖在导航栏的顶部，并隐藏在边栏的下方。

See the screenshot
我通过添加margin-top和margin-left首先修复了此问题

.bodis {
    margin-top: 50px;
    margin-left: 330px!important;
}

但这不是很动态，它也不是响应，因为当我隐藏边栏，页面的内容停留在页面的中心，当屏幕尺寸减小，内容甚至消失。
您可以检查它in the first screenshot，.您可以看到，当我们缩小屏幕大小时，内容会消失.当我们隐藏侧边菜单时，正文的内容仍在屏幕的中心，and in the second screenshot
这个模板使用了几个css和javascript框架，如下所示。我已经阅读了其中一些的文档，比如Bootstrap，但是我不清楚什么是为我添加到项目中的每个屏幕制作动态内容的最佳方法

引导程序V4.3
引导程序物料设计V4.0
字体超赞V5.9.0
甜蜜提示V8.13.0 CSS文件
jQuery自定义内容滚动条V3.1.5

------ javascript语言----

jQuery 3.4.1版

“砰”的一声

引导程序V4.3

如何使移动的设备上的内容具有动态性和有效性？
如何使页面内容占据几乎整个屏幕并在显示侧菜单时滚动？我可以使用模板使用的任何框架吗？
我显示了副菜单的条形码和其中一个视图的条形码，在本例中为主页

主视图：

第一个
我尝试通过添加margin-top和margin-left来修复此错误：

.bodis {
    margin-top: 50px;
    margin-left: 330px!important;
}

我已经阅读了引导程序文档，试图找到一个解决方案，但我没有看到它是最适合我的需要
我尝试过实现the answers of this question，但在我的情况下不起作用

我终于找到了一个解决问题的方法，虽然我不能在这里添加所有的代码，但解决方法非常简单。
我只订购了我的css文件，并删除了不必要的，以避免问题。
对于添加回应用的视图，我将它们放在两个div中。父视图 Package 所有内容，并具有以下css：

bodysuits {
    margin-top: 80px;
    overflow-y: hidden;
    width:100%;
}
.body .content {
    padding: 20px;
}

我们还添加了第二个div，其中div class="content"
这样，我的不同页面看起来会像这样：

<div class="bodis page-content">
   <div class="content">
     <h1 class="title ">Title</h1>
     <h2 class="subtitle">Subtitle</h2>
     
     <!-- THE REST OF THE CONTENT --!>
  
   </div>
</div>

通过将宽度从100%更改为300px来更新media query代码，如下所示;

@media(max-width: 767px)
.nav-side-bg {
    width: 300px;
    height: 100%;
    background-color: rgba(3, 3, 3, .4);
    position: relative;
    display: block;
    z-index: 2;
}

所有这些工作，我被鼓励学习css更深入，因为我看到它是一个非常强大的语言在网页布局

css 如何滚动的正文内容与侧菜单，并使其动态的小屏幕？

1条答案

相关问题

热门标签

最新问答