html - 我怎样才能让 body 填满整个可用空间，而不仅仅是屏幕？

Question

我有一个侧边栏，无论屏幕放大到什么程度，我都希望它完全位于正文的右侧。所以如果屏幕是 100% 缩放，它应该与屏幕的右边界对齐，但我放大得越多，它应该随着 body 的右边界向右移动而慢慢隐藏。

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

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

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

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

Answer 1

好的，所以，只有这个:

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>

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