Topic on Project:Support desk

I'm currently re-skinning my wiki and want both the main navigation and the page content to be seperated from the background image as "one unit", ie having the same background color and matching borders/box-shadows, so that it looks like one page and not like here in the default Vector, where the main menu is completely seperate on the left side.

To do this I first tried to give both the content and the navigation the same background-color, but the problem was that I couldn't stretch the main navigation div all the way down to the bottom/footer. I tried several stuff, including the display:flex property, but nothing worked out.

Then, I tried assigning the backgorund-image to html and the background-color and a reduced width to the body:

html {
background-image:url('https://domain.tld/background.jpg');
background-size:cover;
background-attachment:fixed;
}
body {
    background-color: #fdfdfd;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 0 10px -10px rgba(0,0,0,0.30), -10px 0 10px -10px rgba(0,0,0,0.30);
margin-top:2em;
}

However, now the body doesn't go all the way down to the bottom, as you can see here: https://abload.de/img/mediawikic0sb5.png

What's the problem there? How to stretch the body to the bottom?

You should be able to stretch the element by giving it a height, e.g. height: 100%;. You can use the developer tools of your webbrowser to directly see the change in rendering so that you immediately know, if what you did had the intended effect.