Question

I try to create a small website. Now I've problems with the positioning of several html attributes. What I'll do is quite simple: the header should have a width of 100% and fixed on the top. The footer should have also a width of 100% and fixed on the button. The vertical navigation bar should fill the space between the footer and the header. The content, should fill the rest, with a margin of 10px. Here's my actual try:

CSS: * { margin: 0px; padding: 0px; border: 0px; }

html, body {
height: 100%;
width; 100%;
}

#pageWrapper {
height: 100%;
}

header{
height: 50px;
width: 100%;
background-color:yellow;
}

footer{
height: 50px;
width: 100%;
background-color:blue;
}

#mainWrapper{
width:100%;
height: 100%;
background-color:black;
}

#mainWrapper #navigation {
width: 250px;
height: 100%;
background-color:orange;
float: left;
}

#mainWrapper #content {
height: 100%;
width: 100%;
background-color: green;
}

HTML:

<body>

    <div id="pageWrapper">
        <header>

        </header>

        <div id="mainWrapper">
            <div id="navigation">

            </div>

            <div id="content">
                <p>Test content</p>
            </div>
        </div>

        <footer>

        </footer>
    </div>
</body>

https://jsfiddle.net/6ptmq4ce/3/

What you can see is, that the size of this page is bigger than 100%, there is a scrollbar. How can I get this scrollbar away? And how I can set for the content a margin of 10px?

Answer 1

You are using 100% for all elements which will push the bottom out of the viewport so some elements have to be less than 100%

#mainWrapper {
    height: calc(100% - 100px);
}

-100px means you take out the header and footer

Answer 2

if you dont mind using vh you can solve it like this.

We're just making the footer and header each 10% height of the viewport with height:10vh and the content 80% with height:80vh

Problems with element positioning in css

2 个答案: