将一个div设置成始终占据右边80%的页面

可以使用CSS中的定位和宽度属性来实现这个效果。具体的代码如下：

div {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
}

这个代码块中，使用了position属性将div设置为固定定位，使用top和right属性将div定位到页面的右上角，使用width属性将div的宽度设置为页面宽度的80%。这样就可以实现始终占据右边80%的效果。

相关问题

如何让一个div在上，两个div在下

您可以使用 CSS 的布局属性来实现这个效果。以下是一种可能的方法：

HTML 代码：

<div class="top">这是上面的div</div>
<div class="bottom">
  <div class="left">这是下面的左边div</div>
  <div class="right">这是下面的右边div</div>
</div>

CSS 代码：

.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #ccc;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
}

.left {
  float: left;
  width: 50%;
  height: 100%;
  background-color: #eee;
}

.right {
  float: right;
  width: 50%;
  height: 100%;
  background-color: #ddd;
}

解释：

- `position: absolute;` 和 `top: 0; left: 0; right: 0;` 把 `.top` 元素定位到页面的顶部，宽度为整个页面宽度，高度为 100px。
- `.bottom` 元素也是绝对定位，但是把它定位到页面底部。
- `.left` 和 `.right` 元素使用浮动布局，分别占据 `.bottom` 元素的左半部分和右半部分，高度为整个 `.bottom` 元素的高度。因为浮动元素脱离了正常文档流，所以需要给 `.bottom` 元素设置 `height: 200px;` 来撑开它的高度，以便让里面的浮动元素正常排列。

帮我写一个页面布局，页面的最左边是一个el-menu菜单，页面的右边有一个位于剩余页面居中，宽度占据整个页面40%的白色背景box，请给出代码示例

可以使用flex布局实现该页面布局，以下是示例代码：

HTML部分：

<div class="container">
  <div class="menu">
    <el-menu>
      <!-- 菜单项 -->
    </el-menu>
  </div>
  <div class="content">
    <!-- 内容区域 -->
    <div class="box"></div>
  </div>
</div>

CSS部分：

.container {
  display: flex;
  height: 100vh; /* 高度设置为100% */
}
.menu {
  width: 20%; /* 左侧菜单宽度为20% */
}
.content {
  flex: 1; /* 右侧内容区域占据剩余空间 */
  display: flex;
  justify-content: center; /* 内容区域居中 */
  align-items: center;
}
.box {
  width: 40%; /* box宽度为整个页面的40% */
  height: 500px; /* 高度自定义 */
  background-color: white;
}