Question

好的，所以我在页面底部有一个小页脚，点击后，切换显示/隐藏内容框。基本上，代码看起来像这样：
的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的{{1}}设置为50％。填写整个页面。我也尝试了#foot_content的各种值。我得到了相同的结果（position），或者没有切换到正确的结果（relative和fixed）。我怎么能这样做？

Answer 1

您可以尝试设置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%; }修改：Check here for browser support of Viewport Units。

或者

var $currDiv = $("#start");
$("div").hide();
$currDiv.css("background", "red");
$("#1").click(function() {
    $currDiv = $currDiv.next();
    $("div").hide();
    $currDiv.show();
});

var $currDiv2 = $("#startPrev");
$("div").hide();
$currDiv2.css("background", "red");
$("#2").click(function() {
    $currDiv2 = $currDiv2.prev();
    $("div").hide();
    $currDiv2.show();
});

Answer 2

我只是做了一个小提琴，它看起来像它的工作：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的高度设置为窗口的一半。

将Toggled div的高度设置为百分比

3 个答案: