HTML - 页面内容溢出答案

【问题标题】：HTML- Contents of the page are overflowingHTML - 页面内容溢出
【发布时间】：2021-10-17 16:37:19
【问题描述】：

我正在制作一个仪表板，左侧有一个侧边栏。每当我想在页面上放置一些内容时，其中一些曾经在侧边栏后面。我添加了overflow-x:auto，这发生了这是仪表板的代码：

.container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
}

.sidenav {
  position: absolute;
  float: left;
  height: 100%;
  z-index: 1;
  left: 0;
  overflow-x: hidden;
}

.content {
  float: right;
  margin-left: 5rem;
}

<div class="main">
  <div>
    <app-header></app-header>
  </div>
  <div class="container ">
    <div class="sidenav">
      <app-sidebar></app-sidebar>
    </div>
    <div class="content">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

如您所见，我将overflow-x:auto 放在“容器”中。但是当我删除它时，会发生这样的事情

我该怎么办？提前感谢您的帮助

【问题讨论】：

如果您在.sidenav 上使用position: absolute;，则无需设置float 属性。只需使用left: 0;
@KunalTanwar 谢谢，那行得通。但右边的空白仍然存在
你能提供完整的代码吗？
@KunalTanwar 我已经把它放在帖子里了。这就是整个代码
我的意思是你的.content里面的元素也是。

标签： html css angular flexbox

【解决方案1】：

好的，我解决了这个问题。

这就是我所做的。仪表板.html：

<div class="d-flex flex-column h-100 w-100">
  <div>
    <app-header></app-header>
  </div>
  <div class="d-flex flex-grow-1 h-100 w-100">
    <div>
      <app-sidebar></app-sidebar>
    </div>
    <div>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

dashboard.css

*{
    overflow-y: hidden;
}

【讨论】：