Jump to content

height of "sidebar" with 100% - overflow-y scroll messes up - ideas?


rootKID

Recommended Posts

Hello W3S! Not sure if the title fits but it was the only one i could think of that would maybe even come close to what i am trying ^^'

So the background of what i am trying to do, is to re-code my portfolio and this time i have a link on my navigationbar that, when clicked, a sidebar will open on the users right side of the screen. I have set the sidebar to 100vh i height to make sure the container of sidebar would appear 100% to the users screen (this is how i understood it, please tell me if i got this vh thing wrong!) - now the idea is at one point to have the sidebar to be dynamic with many many MANY sub-navs! So what i am trying to do here is to say if all the item links i am adding in, goes OVER the wrapper i have set around the items, there will appear a scroll on the left side of the users browser - however when so, it messes up at the bottom of my page since there is this white gap when i try to scroll down - almost like it won't detect that there are no items added yet.

This is my CSS code so far:

* {
    font-size: 8pt;
    font-family: Arial, Helvetica, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: #ecdecd;
}

.wrapper {
    margin: 0 auto;
    width: 1080px;
    background-color: #ffffff;
}
    .navbar {
        width: 100%;
        height: 35px;
        background-color: #cdcdcd;
    }
        .navbar-left {
            float: left;
            text-align: left;
            width: 540px;
        }
            .navbar-left-links {
                float: left;
                margin: 0 0 0 10px;
                width: 100px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                display: block;
                background: #333333;
                color: #ffffff;
                text-decoration: none;
                opacity: 0.6;
                transition: 0.3s;
            }
            .navbar-left-links:hover {
                opacity: 1;
            }
        .navbar-right {
            float: right;
            text-align: right;
            width: 540px;
        }
            .navbar-right-links {
                float: right;
                margin: 0 10px 0 0;
                width: 100px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                background: #333333;
                color: #ffffff;
                text-decoration: none;
                display: block;
                opacity: 0.6;
                /*
                OBS!
                Read the long comment below here and on the right side of transition in this class! Important!
                */
                transition: 0.3s; /*if i put it here instead on the "on hover" part, it will have a weird load on page load! consider the pros/cons by doing this! (this is only theory! Because when i re-started the browser and hit refresh a coble of times it did not do the error!)*/
            }
            .navbar-right-links:hover {
                opacity: 1;
            }
    .footer {
        width: 100%;
        height: 150px;
        border-top: 3px solid #444444;
        background-color: #666666;
        color: #cdcdcd;
    }

.sidebar {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    border-left: 3px solid #cc6600;
    background-color: #000000;
    color: #ffffff;
    /*opacity: 0.9;*/
}
    .sidebar-top-div-link-close {
        width: 100%;
        text-align: center;
    }
        .sidebar-top-div-link-close a {
            display: block;
            color: #ffffff;
            background-color: #111111;
            padding: 10px 0 10px 0;
        }
    /*consider how to make the height 100% without the scrolls take up width/height etc at the bottom of the page!*/
    /*Also consider how to make the height 100% and if a overflow happens, then scroll on x-axis and NOT! y-axis!*/
    .sidebar-wrapper-1 {
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 100%;
    }

This is my HTML for now:

<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portfolio :: Daniel Ugleholt Pedersen</title>
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" media="screen" href="include/css/main_default.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <nav class="navbar">
            <div class="navbar-left">
                <a class="navbar-left-links" href="index.php" title="Forside">Forside</a>
                <a class="navbar-left-links" href="#" title="Kontakt">Kontakt</a>
            </div>
            <div class="navbar-right">
                <a id="navbar-open_sidebar_navigation_1" class="navbar-right-links" href="#" title="Mere">Mere</a>
                <a class="navbar-right-links" href="#" target="_blank" title="Login (åbner i nyt vindue/tab!)">Login</a>
            </div>
        </nav>
        <div class="content_wrapper">
            Wrapper
        </div>
        <footer class="footer">
            Navn, Mail (til website ikke private!), Site Map, Om Mig/Os, Privacy Policy (privatliv og privatheds politik), Terms & Conditions (regler for brug af siden), Nyhedsbrev, Disclaimer, Copyright/Trademark (none, just a portfolio), Terms of Usage (samme som Terms and Conditions?), GDPR (hvordan jeg bruger logins, cookies, sessions, osv i forhold til sikkerhed på sitet! Husk at informerer om at jeg bruger krypteringer. Ikke hvilke slags krypteringer men at der bliver krypteret så brugeren ved dette!), Husk at lave en notifikations pop-up der siger jeg enten bruger cookies eller sessions på siden!
        </footer>
    </div>
    <div class="sidebar">
        <div class="sidebar-top-div-link-close">
            <a id="sidebar-link-close" href="#">Luk Sidebar</a>
        </div>
        <div class="sidebar-wrapper-1">
            Wrapper 1
        </div>
    </div>
</body>
</html>
<script>
    $(document).ready(function(){
        // Sample URLs
        // https://api.jquery.com/click/
        // https://stackoverflow.com/questions/5059596/jquery-css-remove-add-displaynone

        $( "#navbar-open_sidebar_navigation_1" ).click(function() {
            // to see if the script is called at all and correctly!
            //alert( "Handler for .click() called." ); // Testing
            $('.sidebar').css('display','block');
        });

        $( "#sidebar-link-close" ).click(function() {
            // to see if the script is called at all and correctly!
            //alert( "Handler for .click() called." ); // Testing
            $('.sidebar').css('display','none');
        });
    });
</script>

What can i do to rectify this?

Thanks a lot in advance! :D

Link to comment
Share on other sites

You could try using display:flex

Add this onto your sidebar

.sidebar {
  display: flex;
  flex-direction: column;
}

And this onto your sidebar-wrapper-1

.sidebar-wrapper-1 {
 flex: 1;
}

And just remove height: 100%. I think that's how it goes.

Link to comment
Share on other sites

Im going to try this yes, or tho i must say i am still learning FLEX-CSS and what it is about 😕

What is the difference from you are writing to mine? Can you tell?

Link to comment
Share on other sites

Setting height:100vh will mean the element using this will NOT extend more than the current viewport  height. Adding a element inside this and using 100% height means it will match that height, but any margins for example OR elements that are within the 100vh container are a addition to the element using 100% height. if you check the height of 'sidebar-top-div-link-close' element, you will see it matches the white space height.

Using position: absolute; is pointless also, as it does not extend according to content, content and surrounding elements are oblivious to its existence and dimensions and should never be used for layout purposes because of this.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...