Question

经过长时间的中断后，我正在尝试使用右侧的菜单和滚动窗格来创建页面。

除了滚动条没有沿着页面的整个高度向下移动而是垂直移动大约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部分我只是在看到之后才添加，即使有溢出也没有出现滚动条。

Answer 1

试试这个，正如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;
}

希望这对你有所帮助。

如何使用滚动条滚动所有菜单标题？

1 个答案: