我怎样才能让身体充满整个可用空间，而不仅仅是屏幕？

Question

我有一个侧边栏，无论屏幕放大到何种程度，我都希望它完全位于主体的右侧。所以如果屏幕100%缩放，应该和屏幕右边框对齐，但是我越放大，它应该慢慢隐藏，随着身体的右边框向右移动。

我怎样才能做到这一点？就像我现在的代码一样，无论我放大多少，侧边栏都与屏幕的右边框完全对齐。所以如果我放大然后向右滚动，侧边栏和右边框之间会显示大量空白身体。

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

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

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

Answer 1

我想你想要

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

Answer 2

好的，所以，只有这个：

CSS：

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

HTML：

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

侧边栏不能位于页面右侧。不可能。要让它粘在窗口的右侧，您需要这样：

CSS：

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

见jsfiddle:

但我想这就是你要找的东西： 如果你想让它成为一个侧边栏并且仍然让它相对定位，你需要一个主要内容和一个包装器。看到这个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>

我对最后一个进行了疯狂的猜测，认为这就是你最终想要做的事情。在这种情况下，即使您缩放/缩小窗口并向右滚动，您也会一直看到蓝色背景。没有白色区域。