左侧面板未达到全高，但指定了高度100％

时间：2016-05-15 07:30:26

标签： html css

下面是滚动窗口后窗口图像的屏幕截图 screenshot

我给我的标题高度为45px，主要部分使用flex。在主要部分内部，我有左侧部分和右侧部分。每当我最小化或最大化我的窗口时，我希望我的左侧部分占据全屏高度。

这是滚动时我的页面的外观。左侧面板没有通过滚动进行调整，尽管我给出了100％的高度

HTML 

<body>
  <header></header>
  <div class="main-section">
    <div class="left-section"></div>
    <div class="right-section"></div>
  </div>
</body>

CSS 

body {
  min-height: 100%;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
header {
  height: 45px;
  width: 100%;
  overflow: hidden;
  display: block;
}
.main-section {
  width: 100%;
  position: relative;
  right: 0;
  left: 0;
  bottom: 0;
  flex-grow: 1;
  overflow: auto;
}
.left-section {
  position: absolute;
  width: 200px;
  height: 100%;
}

1 个答案:

答案 0 :(得分：0)

问题 - 

height : 100%

它指父元素（.main-section）的高度，然后将元素的高度（.left-section）设置为100％。如果父元素的高度未设置为任何值，则浏览器无需引用。

解决方案 - 设置.main-section的高度，然后.left-section将采用其高度。

希望这会有所帮助!!

相关问题
最新问题