<template> <div class="box"> <el-container> <el-header class="tou"> <myhead></myhead> </el-header> <el-container> <el-aside class="zuo"> <myleft></myleft> </el-aside> <el-container> <el-main class="you"> <router-view></router-view> </el-main> </el-container> </el-container> </el-container> </div> </template> <script scoped > import myhead from "../components/myhead.vue" import myleft from "../components/myleft.vue" export default { components: { myhead, myleft, } } </script> <style> .box { height: calc(100vh - 60px); width: 100vw; display: flex; min-width: 700px; overflow-y: hidden; } body { overflow-x: hidden; margin-left: 0px; margin-top: 0px; } .tou { height: 50px; background-color: rgb(0, 0, 0); } .zuo { width: 200px; height: 100%; overflow-y: scroll; } .you { flex: 9; height: 100%; background: #f9ffb9; position: fixed; width: 100%; float: left; margin-left: -100px; } </style> zuo的滚动条拉不动
时间: 2024-03-28 19:39:39 浏览: 98
抱歉,我的建议有误。你的代码中,`.zuo` 元素的高度已经被正确计算,可以出现滚动条。但是,你在 `.you` 元素中设置了 `position: fixed;` 样式,导致它脱离了普通文档流,覆盖在了 `.zuo` 元素上方,导致无法操作 `.zuo` 元素的滚动条。
你可以尝试把 `.you` 元素的 `position` 属性改为 `absolute`,并且在 `.qb` 元素上添加 `position: relative;` 样式,这样就可以让 `.you` 元素相对于 `.qb` 元素定位,不会遮盖 `.zuo` 元素了。
相关问题
.container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100vh; } .sidebar { background-color: #f0f0f0; } .boxes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .box { flex-grow: 1; /* 平分宽度 */ background-color: #ccc; margin-bottom: 10px; } .box:nth-child(n+3) { border-radius: 10px; margin-top: 10px; margin-left: 20px; } <div class="container"> <div class="sidebar"> </div> <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> <div class="boxSon"></div> <div class="boxSon"></div> <div class="boxSon"></div> </div> <div class="box"></div> </div> </div>补全代码将右侧第四个盒子分割为三个子盒子 要求子盒子高度等于父盒子,宽度将父盒子不均等分,且三个子盒子有一定间距
可以将右侧第四个盒子设置为 display: flex,并在其中嵌套三个子盒子,然后给父盒子设置 margin-left: 20px,再给子盒子设置 flex-grow: 1 和 margin-right: 20px 即可实现要求。
修改后的代码如下:
```
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100vh;
}
.sidebar {
background-color: #f0f0f0;
}
.boxes {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.box {
flex-grow: 1;
background-color: #ccc;
margin-bottom: 10px;
}
.box:nth-child(n+3) {
border-radius: 10px;
margin-top: 10px;
margin-left: 20px;
}
.box:nth-child(4) {
display: flex;
margin-left: 20px;
}
.boxSon {
flex-grow: 1;
background-color: #ccc;
margin-right: 20px;
}
.boxSon:last-child {
margin-right: 0;
}
```
HTML代码:
```
<div class="container">
<div class="sidebar"></div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">
<div class="boxSon"></div>
<div class="boxSon"></div>
<div class="boxSon"></div>
</div>
<div class="box"></div>
</div>
</div>
```
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> /* 使用grid布局 */ .container { display: grid; grid-template-columns: 200px 1fr; /* 左侧宽度为200px,右侧占满剩余空间 */ grid-template-rows: 100vh; /* 总高度与视窗高度相同 */ } /* 左侧侧边栏样式 */ .sidebar { background-color: #f0f0f0; } /* 右侧盒子的容器样式 */ .boxes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } /* 右侧5个盒子样式 */ .box { flex-grow: 1; /* 平分宽度 */ background-color: #ccc; margin-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="sidebar"> <!-- 左侧侧边栏内容 --> </div> <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> </body> </html> 更改代码使右侧div具有一定角度,且右侧第3,4,5个盒子与左侧状态栏有一定的距离
可以使用 CSS 的 transform 属性来旋转右侧的盒子,并使用 margin 属性来调整第3、4、5个盒子与左侧状态栏的距离。修改代码如下:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
/* 使用grid布局 */
.container {
display: grid;
grid-template-columns: 200px 1fr; /* 左侧宽度为200px,右侧占满剩余空间 */
grid-template-rows: 100vh; /* 总高度与视窗高度相同 */
}
/* 左侧侧边栏样式 */
.sidebar {
background-color: #f0f0f0;
}
/* 右侧盒子的容器样式 */
.boxes {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* 右侧5个盒子样式 */
.box {
flex-grow: 1; /* 平分宽度 */
background-color: #ccc;
margin-bottom: 10px;
transform: skew(-10deg); /* 旋转-10度 */
}
/* 第3、4、5个盒子的样式 */
.box:nth-child(n+3) {
margin-left: 20px; /* 左边距为20px */
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- 左侧侧边栏内容 -->
</div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
```
阅读全文