时间戳

首页 > 解决方案 > 使 div 的 50% 不是浏览器宽度

html - 使 div 的 50% 不是浏览器宽度

问题描述

我有.left-navbar和.columns-wrapper其中是两列，.left-column并且.right-column. 第一列和第二列有 50% ，直到.columns-wrapper我添加position: fixed并占用浏览器宽度的 50% not 。.right-column.right-column.columns-wrapper

.page-wrapper {
  width: 100vw;
  height: 100%;
  display: flex;
  background: red;
}

.page-wrapper .left-navbar {
  width: 88px;
  height: 100%;
  background: yellow;
}

.page-wrapper .columns-wrapper {
  width: calc(100% - 88px);
  height: 100%;
  background: orange;
  display: flex;
}

.page-wrapper .columns-wrapper .left-column {
  width: 50%;
  height: 100%;
  background: red;
}

.page-wrapper .columns-wrapper .right-column {
  width: 50%;
  height: 100%;
  background: green;
}
<div class="page-wrapper">
  <div class="left-navbar">

  </div>
  <div class="columns-wrapper">
    <div class="left-column"></div>
    <div class="right-column"></div>
  </div>
</div>

标签： htmlcss

解决方案

将columns-wrapper位置设置为relative，left-column并将right-column位置设置为absolute。绝对位置与位置值为 的祖先容器有关relative。

position: fixed与整个浏览器位置有关，而不是与它的父容器有关。

.page-wrapper .columns-wrapper {
  position: relative;
  ...
}

.page-wrapper .columns-wrapper .left-column {
  position: absolute;
  ...
}

.page-wrapper .columns-wrapper .right-column {
  position: absolute;
  ...
}

推荐阅读