CODEWITHSUNDEEP
htmlcsspositionpositioning
Joe Morano
Joe Morano

Reputation: 1885

How can I make the body fill the entire available space, not just the screen?

I have a sidebar, which I would like to be positioned completely to the right of the body, no matter how zoomed in the screen is. So if the screen is at 100% zoom, it should be lined up with the right border of the screen, but the more I zoom in, it should slowly be hidden as it moves rightwards along with the right border of the body.

How can I accomplish this? As my code is now, the sidebar stays perfectly aligned with the screen's right border no matter how much I zoom in. So if I zoom in and then scroll right, a large amount of white space is revealed between the sidebar and the right border of the body.

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

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

#sidebar {
  position: relative;
  right: 0%;
}

Upvotes: 0

Views: 3007

Answers (2)

Phil LaNasa
Phil LaNasa

Reputation: 3035

I think you want

    html { height: 100%; min-height: 100%; }
    body { min-height: 100%; }

Upvotes: 0

Alin
Alin

Reputation: 1228

Ok, so, with only this :

CSS:

body, html {
  width: 100%;
  height: 100%;
    background:blue;
}
#sidebar {
  position: relative;
  right: 0%;
}

HTML:

<div id="sidebar">Test</div>

The sidebar CAN'T BE on the right side of the page. It's impossible. To make it stick on the right side of the window you need it like this :

CSS:

body, html {
    width: 100%;
    height: 100%;
    background:blue;
    margin:0;
    padding:0;
}
#sidebar {
    position: absolute;
    right: 0;
    background:white;
}

See jsfiddle:

BUT I GUESS THIS IS WHAT YOU ARE LOOKING FOR: If you want this to be a sidebar and still have it positioned relative, you need a main content, and a wrapper. See this jsfiddle.

CSS:

body, html {
    width: 100%;
    height: 100%;
    background:blue;
    margin:0;
    padding:0;
}
#wrapper{
    width:300px;
    height:auto;
    margin:0 auto;
    position:relative;
    padding:0;
}
#content{
    width:200px;
    height:auto;
    float:left;
    padding:0;
    margin:0;
    background:yellow;
}
#sidebar {
    width:100px;
    height:auto;
    position: relative;
    float:left;
    padding:0;
    margin:0;
    background:white;
}

HTML:

<div id="wrapper">
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
</div>

I took a wild guess on the last one thinking this is what you will want to end up doing. In this, even if you zoom/shrink your window and you scroll right, you will see the blue background all the way. No white areas.

Upvotes: 1

Related Questions