Question

我有一个侧边栏，无论屏幕如何放大，我都希望完全位于身体右侧。因此，如果屏幕是100％变焦，它应该与屏幕的右边界对齐，但是我放大的越多，它应该慢慢地隐藏，因为它与身体的右边界一起向右移动。

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

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>

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

Answer 2

我想你想要

gradle.properties

如何让身体填满整个可用空间，而不仅仅是屏幕？

2 个答案: