文章/答案/技术大牛

发布

社区首页 >问答首页 >关于缩小屏幕尺寸- -The侧边导航栏与主要内容重叠，并在浏览器窗口屏幕的右侧留出空白

问关于缩小屏幕尺寸- -The侧边导航栏与主要内容重叠，并在浏览器窗口屏幕的右侧留出空白
EN

Stack Overflow用户

提问于 2019-08-13 17:20:04

回答 1查看 48关注 0票数 0

嗨，我在网络应用程序中工作。我在里面有布局问题。在最大浏览器屏幕上。

每件事都运行良好。

但是，当我缩小屏幕尺寸并尝试一些导航和水平滚动时，我遇到了两个主要的布局问题。

水平滚动1.侧面导航栏与主要内容重叠。2.在浏览器屏幕的右侧获取空白。

单击导航菜单时，主要内容会向左侧跳转，并与侧面菜单重叠

   <html>
    <body>
    <div id="app">
    <div class="main-content">
    <nav class="menu-fixed-top sticky-top"> </nav>
    <div class="container-fluid">
    <div class="Page">
    <div class="Page-content">
    <nav  id="Page-nav"> 
    <ul class="nav nav-pills"></ul>
    <li  class="nav-item"> </li> </nav>
    <div class="Page-main">
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
   </body>
 </html>

 <style>

html,
body,
#app,
.container-fluid {
      height: 97%;
      position: relative;
      width: 100%;
      display: table;
}

.menu-fixed-top {
  background:$selected-color;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 11;
}
.Page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.Page-content {
  width: 100%;
  margin-top: 10px;
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-flow: row;
  position: relative;
}

.Page-main {
  width: 100%;
  position: relative;
  padding-left: 0px;
  padding-right: 10px;
  margin-left: 16.6rem;
  height: 100%;
}

#Page-nav {
  position: fixed;
  z-index: 10;
  margin-top: 0px;
  flex: 0 0 auto;
  padding-left: 0px;
  padding-right: 0px;
  width: 15rem;
  min-width: 15rem;

  & ul {
    display: block;
  }
  & li {
    display: block;
  }
}

.nav-pills {
  .nav-link {
    color: #000000;
    border-radius: 9px;
    padding-left: 1rem;
    padding: 0.25rem 0.5rem;
    font-size: 10pt;

    &.active {
      color: $selected-color;
      background: #ffffff;
      border: 1px solid #ffffff;
      font-weight: bold;
    }

    &:not(.active) {
      border: 1px solid transparent;
    }

    &:hover {
      background: $navbar-default-bg;
      color: $highlight-dark-color;
    }
  }
}
 </style>

html

css

回答 1

Stack Overflow用户

发布于 2019-08-13 17:40:38

我认为你需要使页面具有自适应能力：

然后在css文件中用代码做四个块：

/-992px-1200px/ @媒体屏幕和(max-width: 1200px)

/768px-992px/ @媒体屏幕和(max-width: 992px)

/-576px-768px/ @媒体屏幕和(max-width: 768px)

/-0px-576px/ @媒体屏幕和(max-width: 576px)

对于这个元素，你需要一个代码，一些宽度，边距等等

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57474688

复制

相似问题

问关于缩小屏幕尺寸- -The侧边导航栏与主要内容重叠，并在浏览器窗口屏幕的右侧留出空白
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关于缩小屏幕尺寸- -The侧边导航栏与主要内容重叠，并在浏览器窗口屏幕的右侧留出空白EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关于缩小屏幕尺寸- -The侧边导航栏与主要内容重叠，并在浏览器窗口屏幕的右侧留出空白
EN