在Ionic+Angular中解决侧边栏遮挡文本内容的问题

正如你推测的，侧边栏设置position: absolute后脱离了文档流，正文容器无法感知它的存在，导致内容直接重叠在侧边栏下方。下面提供两种解决方案，既能保留现有侧边栏的布局逻辑，又能避免硬编码大量固定值：

方案1：适配现有代码的快速修复 #

给正文容器text_content添加与侧边栏宽度匹配的margin-left，并通过媒体查询同步侧边栏的宽度变化，确保正文始终显示在侧边栏右侧：

修改后的CSS代码：

#sidebar_button_container {
  text-align: center;
  position: absolute;
  left: 0;
  top: 55px;
  bottom: 0;
  padding-right: 5px;
  padding-left: 5px;
  background-color: #dddddd;
}

#text_content {
  /* 默认适配竖屏小屏幕的侧边栏宽度 */
  margin-left: 50%;
  margin-top: 55px; /* 和侧边栏top值一致，避开顶部toolbar */
  padding: 0 10px; /* 可选，增加内边距提升可读性 */
}

@media screen and (min-width:400px) {
  #sidebar_button_container {
    right: 80%;
  }
  #text_content {
    margin-left: 20%; /* 100% - 80% = 侧边栏宽度 */
  }
}

@media screen and (max-width:400px) and (orientation:portrait) {
  #sidebar_button_container {
    right: 50%;
  }
  #text_content {
    margin-left: 50%;
  }
}

@media screen and (max-width:600px) and (orientation:landscape) {
  #sidebar_button_container {
    right: 60%;
  }
  #text_content {
    margin-left: 40%;
  }
}

这个方案无需改动HTML结构，仅通过调整正文的外边距就能解决遮挡问题。

方案2：使用Flex布局重构（推荐） #

绝对定位容易引发布局重叠、响应式适配复杂等问题，更推荐用Flex布局实现侧边栏+正文的结构，布局逻辑更清晰，也更符合现代CSS规范：

首先给HTML添加一个父容器，包裹侧边栏和正文：

<div class="page-container">
  <div id="sidebar_button_container">
    <ion-button href="start-game" color="dark" expand="block">{{ newgame_text }}</ion-button>
    <ion-button href="view-previous-games" color="dark" expand="block">{{ viewgames_text }}</ion-button>
  </div>

  <div id="text_content">
    Test. Example Text, This is so that I can read it wherever it is.
  </div>
</div>

然后替换原有CSS为Flex布局：

.page-container {
  display: flex;
  margin-top: 55px; /* 避开顶部的ion-toolbar */
  min-height: calc(100vh - 55px); /* 让容器占满toolbar下方的剩余高度 */
}

#sidebar_button_container {
  text-align: center;
  padding: 0 5px;
  background-color: #dddddd;
  flex-basis: 50%; /* 基础宽度，对应竖屏小屏幕的布局 */
}

#text_content {
  flex: 1; /* 自动填充侧边栏之外的剩余空间 */
  padding: 0 10px; /* 可选，提升正文可读性 */
}

@media screen and (min-width:400px) {
  #sidebar_button_container {
    flex-basis: 20%; /* 对应原布局中right:80%的宽度 */
  }
}

@media screen and (max-width:600px) and (orientation:landscape) {
  #sidebar_button_container {
    flex-basis: 40%; /* 对应原布局中right:60%的宽度 */
  }
}

Flex方案的优势 #

• 布局稳定，不会出现脱离文档流导致的重叠问题
• 无需手动计算外边距，Flex会自动分配剩余空间
• 响应式适配更简洁，和Ionic框架的布局理念一致

内容的提问来源于stack exchange，提问作者Menotdan