javascript - 将“切换div的高度”设置为“百分比”

好的，因此我在页面底部有一个页脚，单击该按钮可切换以显示/隐藏内容框。基本上，代码如下所示：
CSS：

        body {
            background:black;}

        footer {
            position:fixed;
            bottom:0;
            right:2em;
            width:25%;
            background:white;
            text-align:center;}

        #foot_content {
            display:none;
            overflow-y:auto;}

        #foot_content p {
            margin:1em auto 0;
            max-width:75%;}

javascript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#foot").click(function () {
            $("#foot_content").slideToggle("1ms");
            });
    });
    </script>

的HTML：

<body>
    <footer class="bar" id="foot">
        <div id="foot_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet cursus sapien sit amet rutrum. Suspendisse semper eros sit amet sem semper, vitae finibus sem porta. Nullam facilisis est vestibulum efficitur molestie. Nam euismod, est a feugiat placerat, nibh diam faucibus ipsum, nec scelerisque velit nisl quis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget justo ligula. Aenean sodales nunc at sem venenatis, id pharetra diam vehicula. Nullam mollis massa quis libero tincidunt ultrices. Integer odio lorem, rhoncus id pretium eget, suscipit et ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet cursus sapien sit amet rutrum. Suspendisse semper eros sit amet sem semper, vitae finibus sem porta. Nullam facilisis est vestibulum efficitur molestie. Nam euismod, est a feugiat placerat, nibh diam faucibus ipsum, nec scelerisque velit nisl quis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget justo ligula. Aenean sodales nunc at sem venenatis, id pharetra diam vehicula. Nullam mollis massa quis libero tincidunt ultrices. Integer odio lorem, rhoncus id pretium eget, suscipit et ante.</p>
        </div>
        <div class="title">Title</div>
    </footer>
</body>

我想要它，以便内容的顶部边缘在向上时，等于或低于窗口的中点，并且可以滚动溢出的文本。
我尝试将max-height的#foot_content设置为50％。填满了整个页面。我还尝试了position的各种值。我得到的结果相同（relative），或者没有正确切换（fixed和absolute）。我怎样才能做到这一点？

最佳答案

您可以尝试设置#foot_content {height:50vh;}编辑：Check here for browser support of Viewport Units。

要么

html, body {
  height: 100%; /* for % based height to work you need to declare height on the parent */
  margin: 0;
  padding: 0;
}

#foot_content {
   height:50%;
 }