將“切換div的高度”設置為“百分比”

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>

我想要它，以便內容的頂部邊緣在向上時，等於或低於窗口的中點，並且可以滾動溢出的文本。 我嘗試將#foot_content的max-height設置為50％。 填滿了整個頁面。 我還嘗試了各種帶有position值的方法。 要么我得到了相同的結果（ relative ），要么它沒有正確切換（ fixed和absolute ）。 我怎樣才能做到這一點？

Answer 1

您可以嘗試設置#foot_content {height:50vh;}編輯：在此處檢查瀏覽器對視口單元的支持。

要么

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

我只是做了一個小提琴，它看起來像在工作： https : //jsfiddle.net/odv0mj33/

我只是將頁腳更改為max-height，並且可以正常工作。

    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的高度設置為窗口高度的一半。

將“切換div的高度”設置為“百分比”

問題描述

3 個解決方案

解決方案1
3 已采納 2015-08-05 18:33:30

解決方案2
0 2015-08-05 18:35:33

解決方案3
0 2015-08-05 18:38:08

將“切換div的高度”設置為“百分比”

問題描述

3 個解決方案

解決方案1 3 已采納 2015-08-05 18:33:30

解決方案2 0 2015-08-05 18:35:33

解決方案3 0 2015-08-05 18:38:08

解決方案1
3 已采納 2015-08-05 18:33:30

解決方案2
0 2015-08-05 18:35:33

解決方案3
0 2015-08-05 18:38:08