How can I have a div/span "fill in" the remaining width/height of the page, and stay fixed in position?

Question

I'm trying to develop a web app that works locally (don't know how to explain it, but it works like clipchamp in that it "works" on your computer) but that is irrelevant for now so I won't delve further in this area.

At the moment I'm having trouble with the layout of the page and its CSS rules. I have a header(div) that takes up 100% of the page's width, but is 25px high and sits at the top of the page; and a navbar(span) that should take up the remaining space in height (we'll get there later), has a width of 180px and sits on the left side of the page. The rest of the page is supposed to be where the content lies.

My problems are the following:

Since I wanted both the header and the navbar to be fixed in their positions (so that the scrolling only occurs on the content div) I tried adding position: fixed; to their rules. However that resulted in the navbar resetting its position to the top left corner of the page, therefore overlapping with the header, so I moved the navbar from the top by 27px (h. of header + its border) and since I didn't know how to let the navbar take up the rest of the space left in height, I temporarily gave it a height of 97.2%. This is obviously bad, which is why I'm here. So, how can I make it so that this span takes up the remaining space automatically ?
After I'd done the above, I realized that the content div moved at top left corner of the page. I have no idea why this is happening. I tried moving the content div by a fixed amount as well in a similiar fashion to resolve this, which, again, is bad. So I have basically the same problem as before, except this time it's for both width and height.

I tried searching and checked out some of the solutions suggested to other users (was more intrigued by this solution here suggested by another user in this thread, but being new I didn't quite understand how I could adapt it to also include a vertical column next to the content div and therefore reverted my attempted changes to the code and tried sticking to what I understood).

So, here is the HTML code. The image in the header shouldn't be a problem, and the only script just keeps refreshing the page every 100ms. (note: the navbar is currently empty, but it's supposed to have an "arrow-menu" inside)

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="preview.js"></script>
    </head>
    <body>
        <div id="header">
            <span id="avatar">
                <img id="avatarImage" src="assets/defaultProfile.png" width="20" height="20">
            </span>
            AnimeDB
            <span id="lightText">Dev Mode</span>
        </div>
        <span id="navbar"></span>
        <div id="content">
            Content
        </div>
    </body>
</html>

And here's the CSS, but I removed the changes to navbar and content. Before you go on reading, I want to point out that I don't fully understand yet some of the properties I've used here (mainly float and display. I have a very rough idea of how both work though).

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body{
    background-color: #D3D3D3;
}

#header {
    display: inline-block;
    color: white;
    background-color: #41B1E1;
    width: 100%;
    height: 25px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: bold;
    font-size: 17px;
    border-bottom: 2px solid white;
    /*box-shadow: 0 3px 5px #9f9f9f;*/
}

#avatar {
    float: left;
    background-color: #0071BC;
    color: white;
    width: 30px;
    height: 25px;
    padding: 0 5px 0 5px;
    border-right: 3px solid #71C5E9;
    margin-right: 5px;
}

#avatarImage {
    margin: 2px 5px;
}

#lightText {
    color: rgba(255, 255, 255, 0.5);
}

#navbar {
    float: left;
    width: 180px;
    height: 97.2%;
    background-color: #A5A5A5;
    border-right: 2px solid white;
}

#content {
    background-color: greenyellow;
}

I hope I've been clear enough in explaining my problems and my thought process, and that I can learn something new from this experience.

score 1 · Answer 1 · answered Jan 31 '16 at 21:47

1

https://jsfiddle.net/8qqbewo1/

One easiest way to do this is use calc() in css.

Calc basically allows you to give dynamic value and fixed value and do simple arithmetic with them in CSS.

So if you do content height = 100% - (heightOfheader + heightOffooter), your content will auto scale.

.content {
  height: calc(100% - 96px );
  overflow: auto;
}

answered Jan 31 '16 at 21:47

Muhammad Umer

14,722
14
69
139

1

Hey, thank you very much. This will come in handy, didn't know you could do that! – Khryus Feb 01 '16 at 18:06

clickbait · Answer 2 · 2016-02-01T22:57:57.580

Since the navbar is a span, you have to set the display to block in order for it to be affected by width and height.

#navbar {
    width: 180px;
    position: fixed;

    display: block;
}

You can make the navbar automatically take up the remaining space by sticking the bottom of it to the bottom of the screen.

#navbar {
    width: 180px;
    position: fixed;
    display: block;

    bottom: 0;
}

As for the content div, it moves to the top-left corner because fixed-positioned elements are positioned to the top-left corner by default.

You still have to move it down and to the left, but you can make it take up the rest of the space by sticking the right and bottom edges of it to the sides of the screen.

#content {
    top: 27px;
    left: 180px;
    right: 0;
    bottom: 0;
}

This makes the content div take up the rest of the screen, but it doesn't allow you to scroll if the actual content is bigger than the div.

To make it possible to scroll, set its overflow property to scroll or auto.

#content {
    top: 27px;
    left: 180px;
    right: 0;
    bottom: 0;

    overflow: scroll;
    /* OR */
    overflow: auto;
}

Scroll makes the scrollbar show all the time, but auto will hide the scrollbar if the content fits.

Hey, before I tried out the other solution, I also tried yours. Wanted to say that the content panel didn't move when I tried using your suggestion, but it did stretch to fill the remaining space. — Khryus, Feb 01 '16 at 18:06

score 1 · Accepted Answer · answered Jan 31 '16 at 22:32

My Solution would be to use 2 wrapper divs:

body-wrapper: contains header and content-wrapper
content-wrapper: contains navbar and content

The wrapper have paddings and are set to 100% width, 100% height AND box-sizing:border-box;, that´s very important. Normally you would get 100% + the padding. With box-sizing:border-box; the element will remain to 100%.

body,
html {
    height: 100%;
}

body {
    background-color: #eee;
    margin: 0;
}

#body-wrapper {
    position: relative;
    height: 100%;
    padding-top: 50px;
    background-color: orange
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 15px 0 0 120px;
    background-color: #bababa;
}

img {
    position: absolute;
    top: 0;
    left: 0;
}

#content-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    padding-left: 100px;
}

#navbar {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    padding: 10px;
    color: #fff;
    background-color: #333
}

#content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1px 20px;
    overflow-y: auto;
}

.border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

<div id="body-wrapper" class="border-box">
    <div id="header" class="border-box">
        <img src="http://placehold.it/100x50">AnimeDB
    </div>
    <div id="content-wrapper" class="border-box">
        <div id="navbar" class="border-box">navbar</div>
        <div id="content" class="border-box">
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>
    </div>
</div>

Hey, thank you for the solution. I ended up using yours, but the other suggestions came in handy too. Changed the layout somewhat to fit my needs, and everything's fine now. Thanks a lot! — Khryus, Feb 01 '16 at 18:04
@Khryus Thank you too. By the way, to get a smooth touch scroller on iOS (iPad) for example add `-webkit-overflow-scrolling: touch;` to `#content` as described here https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ — Roland Krinner, Feb 01 '16 at 19:47

How can I have a div/span "fill in" the remaining width/height of the page, and stay fixed in position?

3 Answers3