CODEWITHSUNDEEP
csshtml
Mirodin
Mirodin

Reputation: 35

How to limit body height to viewport

I got a little problem with my recent attempt to learn about HTML and CSS. Here is the ting: I got myself a HTML page which shows ~100 divs representing a list on the left side. However I want the parent div to contain a scrollbar but its length to be limited by the viewport.

The problem is, when I open the page, the whole body is streched to fit the full list which is not, what I want. Below is a pic with some sample data to show you because my english is not the best. The elements for the "sidebar" get generated by JavaScript and are just divs with text inside (I don`t know, if paragraphs would be better)

Snapshot from browser window

As you can see, the scrollbar is on the right border and when I scroll the whole body is scrolled. I would rather like to have a scrollbar within the "list" and just scroll this without moving the viewport around.

Here is my CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/*--------------------
* Header
*------------------*/

header {
    display: flex;
    align-items: center;
    height: 60px;
    background-color: #4d4d4d;
}
header h1{
    flex: 1;
    color: white;
    font-size: 24px;
    font-family: Tahoma;
}
header ul {
    display: flex;
    flex: 1;
    list-style-type: none;
    height: 100%;
    margin: 0;
}
header li {
    flex: 1;
    color: white;
    text-align: center;
    font-family: Tahoma;
    font-size: 20px;
    padding-top: 30%;
}
header li:hover {
    background-color: #333333;
}
header img {
    background-color: none;
    height: 20px;
    width: 20px;
}

/*--------------------
* Main area
*------------------*/

main {
    flex: 1;
    display: flex;
    margin: 1%;
}

/*--------------------
* Sidebar
*------------------*/

#sidebar {
    display: flex;
    flex: 1;
    overflow: auto;
}
#sidebar div {
    flex: 1;
    text-align: center;
}
#sidebar .th{
    text-transform: capitalize;
}

/*--------------------
* Details
*------------------*/

#details {
    flex: 4;
    margin-left: inherit;
}

And here is my index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <ul>
                <li id="btnPerson">Persons</li>
                <li id="btnCompany">Companies</li>
                <li id="btnSave">Save</li>
                <li id="btnLoad">Load</li>
                <li id="inpChoose">Choose file</li>
                <li id="btnSearch"></li>
            </ul>
        </header>
        <main>
            <div id="sidebar"></div>
            <div id="details"></div>
        </main>
        <script src="src/main.js"></script>
        <script src="src/ui.js"></script>
        <script src="src/init.js"></script>
    </body>
</html>

Here is some code to reproduce my problem:

var sidebar = document.getElementById("sidebar");
var table = document.createElement("div");
table.className = "table";
sidebar.appendChild(table);

for (var i = 0; i < 50; i++) {
  var e = document.createElement("div");
  e.innerHTML = "blabla";
  table.appendChild(e);
}

I hope some smart people can help me with this

Cheers Mirodin

Upvotes: 2

Views: 4182

Answers (1)

Asim
Asim

Reputation: 976

You should wrap your div id="details" inside another div work as a wrapper and use this css:

.wrapper{
overflow:scroll;
height:100px;}

Why not use table?

Upvotes: 1

Related Questions