gpt4 book ai didi

html - 停止文本在移动菜单后面滚动

转载 作者:行者123 更新时间:2023-11-28 00:54:28 25 4
gpt4 key购买 nike

我试图阻止文本在下拉移动菜单后面滚动。我想过使用一个简单的顶部偏移来实现这一点,但是菜单是动态的并且会移动到不同的大小,所以这是不可能的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#menu
{
height:200px;
width:100%;
background-color:#E03437;
position:relative;
}
#main{
height:800px;
width:100%;
overflow:scroll;
}
</style>
</head>

<body>
<div id="menu">MOBILE MENU DROP DOWN</div>
<div id="main">
<p>This a test text I dont want to be able to scroll behind the red mobile menu div above.</p>
<p>&nbsp;</p>
<p>a</p> <p>a</p> <p>a</p> <p>&nbsp;</p>
<p>a</p> <p>a</p> <p>&nbsp;</p>
<p>a</p> <p>&nbsp;</p>
<p>a</p> <p>a</p> <p>&nbsp;</p>
<p>a</p> <p>a</p> <p>a</p> <p>&nbsp;</p>
<p>a</p> <p>a</p> <p>a</p> <p>a</p>
<p>a</p> <p>a</p> <p>a</p> <p>a</p>
<p>a</p> <p>a</p> <p>&nbsp;</p>
</div>

</body>
</html>

最佳答案

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
}
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
height: 100%;
}
#menu{
width:100%;
background-color:#E03437;
position:relative;
padding: 15px;
}
#main{
width:100%;
overflow:scroll;
}
</style>
</head>

<body>
<div class="flex-container">
<div id="menu">MOBILE MENU DROP DOWN</div>
<div id="main">
<p>This a test text I dont want to be able to scroll behind the red mobile menu div above.</p>
<p>&nbsp;</p>
<p>a</p> <p>a</p> <p>a</p> <p>&nbsp;</p>
<p>a</p> <p>a</p> <p>&nbsp;</p>
<p>a</p> <p>&nbsp;</p>
<p>a</p> <p>a</p> <p>&nbsp;</p>
<p>a</p> <p>a</p> <p>a</p> <p>&nbsp;</p>
<p>a</p> <p>a</p> <p>a</p> <p>a</p>
<p>a</p> <p>a</p> <p>a</p> <p>a</p>
<p>a</p> <p>a</p> <p>&nbsp;</p>
</div>
</div>
</body>

关于html - 停止文本在移动菜单后面滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53022023/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com