Set Height of Toggled div to a Percent

Question

OK, so I have a little footer at the bottom of the page that, when clicked, toggles to show/hide a content box. Basically, the code looks like this:
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>

I want it so that the content's top edge, when up, is at or below about the halfway point of the window, and the overflowing text can be scrolled. I tried setting the max-height of #foot_content to 50%. Filled the entire page. I also tried that with various values for position. Either I got the same result (relative), or it didn't toggle right (fixed and absolute). How can I do this?

Maybe this will help you better understand how CSS `height` works with percentage values: [Why is the 'height' property with percentage value not working on my div?](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Aug 05 '15 at 18:41

IMI · Accepted Answer · 2015-08-05T18:40:31.400

3

You can try setting #foot_content {height:50vh;} Edit: Check here for browser support of Viewport Units.

Or

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%; 
 }

edited Aug 05 '15 at 18:40

answered Aug 05 '15 at 18:33

IMI

2,461
1
14
20

Bryan Mudge · Answer 2 · 2015-08-05T18:41:42.910

I just did a fiddle and it looks like its working: https://jsfiddle.net/odv0mj33/

I just changed the footer to have max-height and it worked correctly.

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

}

With the way its set up now you'll have to use max-height on the footer to get the desired outcome without using jQuery, I believe. Add a max height to the footer and it'll scroll.

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

        max-height:200px;

}

score 0 · Answer 3 · answered Aug 05 '15 at 18:38

You could do this with jQuery (since you're already using it) by adding this line after document ready:

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

So your JavaScript will now look like this:

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

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

This sets the div's height to be half that of the window's.

Set Height of Toggled div to a Percent

3 Answers3