经过长时间的中断后，我目前正在尝试制作一个带有菜单和右侧滚动 Pane 的页面。
它运行良好，除了滚动条不会沿着页面的整个高度向下移动，而是垂直移动大约 400-600 像素(所有其他内容都滚动)。尽管我的菜单在保持最佳状态方面效果很好。现在我的问题是如何做一个向下滚动剩余窗口(菜单空间除外)的滚动条？
HTML 文件:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mytitle</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<div id="header">
<div name="phone">
<img src="images/phone" alt="phone" /> 000-000-000-000
</div>
<div name="eMail">
<a href="mailto:mymail@mail.com">
<img src="images/email.png" alt="email">
office@blahblah
</a>
</div>
<div id="menu">
<img src="images/logo.png" />
<div name="Mh">
Home
</div>
<div name="Mw">
blah
</div>
<div name="MOffers">
Offers
</div>
<div name="mD">
T
</div>
<div name="mI">
Infos
</div>
<div name="mC">
Kontakt
</div>
<div name="mI">
Impressum
</div>
</div>
<div id="banner">
BANNER
</div>
<div id="content">
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
b <br />
<div name="w">
</div>
<div name="a">
</div>
<div name="o">
</div>
<div name="d">
</div>
<div name="Infos">
</div>
<div name="Contact">
</div>
<div name="Impressum">
</div>
</div>
</div>
</body>
</html>
CSS文件:
body {
}
#header {
position: fixed;
width: 100%;
}
#content {
width: 99%;
height: 100%;
overflow-y: scroll;
overflow-x:hidden;
}
这里要注意:#content 部分我是在看到即使有溢出但没有出现滚动条后才添加的。
最佳答案
试试这个，正如 Gerdi 所说，方式是 flexbox:https://jsfiddle.net/Lm2dr14o/1/
body, html {
height:100%;
overflow:hidden;
}
#header {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
display:flex;
flex-direction:column;
}
#header>div {
flex-grow: 1;
}
#content {
width: 98%;
height:98%;
margin: 1%;
overflow-y: scroll;
overflow-x:hidden;
flex-grow: 2;
}
希望对你有帮助。
关于css - 如何使用滚动条向下滚动所有菜单标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42055507/