将切换 div 的高度设置为百分比

Question

好的，所以我在页面底部有一个小页脚，单击它会切换到 show/hide 内容框。基本上，代码如下所示：
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>

我希望内容的上边缘在向上时位于或低于 window 的中点，并且可以滚动溢出的文本。我尝试将 #foot_content 的 max-height 设置为 50%。填满了整个页面。我还尝试了 position 的各种值。要么我得到了相同的结果 (relative)，要么它没有正确切换（fixed 和 absolute）。我该怎么做？

Answer 1

您可以尝试设置 #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%; 
 }

Answer 2

我刚刚做了一个 fiddle，它看起来很有效：https://jsfiddle.net/odv0mj33/

我刚刚将页脚更改为具有最大高度并且它工作正常。

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

}

根据现在的设置方式，我相信您必须在页脚上使用 max-height 才能在不使用 jQuery 的情况下获得所需的结果。为页脚添加最大高度，它会滚动。

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

        max-height:200px;

}

Answer 3

您可以使用 jQuery 执行此操作（因为您已经在使用它），方法是在文档准备好后添加此行：

$("#foot_content").height($(window).height() / 2);

所以你的 JavaScript 现在看起来像这样：

$(document).ready(function(){
    $("#foot_content").height($(window).height() / 2);

    $("#foot").click(function () {
        $("#foot_content").slideToggle("1ms");
    });
});

这会将 div 的高度设置为 window 的一半。

将切换 div 的高度设置为百分比

Set Height of Toggled div to a Percent

html

javascript

css

jquery

slidetoggle