Question

我的代码如下所示：

xyz.html

<div class='home-container'>

    <div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400">

    <div class="menu-main"></div>


</div>

xyz.css

.home-container {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    background: #fcfcfc;
}


.home-container .menu-main {
    width: 43%;
    height:3000px;
    position: absolute;
    background-color: red;
    left: 300px;
}

但不知何故，只要我在position:absolute中插入menu-main，就会失去其滚动功能。那么我怎样才能同时实现滚动和绝对位置？

Answer 1

在您的Parent Div（不在容器中）中添加样式属性position:relative;，如下所示。

<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400;position:relative;">

如果您想要水平滚动，还可以在CSS中添加overflow-x: scroll;。如下......

.home-container {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: scroll;
    background: #fcfcfc;
}
.home-container .menu-main {
    width: 43%;
    height:3000px;
    position: absolute;
    background-color: red;
    left: 300px;
}

<div class='home-container'>
<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400;position:relative;">
<div class="menu-main"></div>
</div>
</div>

Answer 2

试试这个添加一个位置：相对;为父div。

＆＃13;

.home-container {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    background: #fcfcfc;
}
.home-container .menu-main {
    width: 43%;
    height:3000px;
    position: absolute;
    background-color: red;
    left: 300px;
}

＆＃13;

<div class='home-container'>
<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400;position:relative;">
<div class="menu-main"></div>
</div>
</div>

＆＃13;

Answer 3

＆＃13;

<script>
function PreSelectedDropDown() {
    var valArr = [1, 2];
    i = 0, size = valArr.length;
    for (i; i < size; i++) {
        $("#EditmultipleSelect option[value='" + valArr[i] + "']").prop("selected", "Selected");
    }  
}
</script>

＆＃13;

body { margin: 0px; }
.home-container {
height: 100vh;
background: #fcfcfc;
margin: 0px auto;
}
.home-container .menu-main {
    width: 53%;
    height: 100vh;
    position: relative;
    background-color: red;
    margin: 0px auto;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div class='home-container'>
<div>
<div class="menu-main"></div>
</div>
</div>
</body>
</html>

position absolute从元素中删除垂直滚动

3 个答案: