Question

我尝试过在本网站和其他网站上找到的10种不同的解决方案，但仍然无法弄明白。希望得到一些帮助，（编码新手）谢谢。

如上所述，我的div容器的背景颜色（我的＆＃34;侧边栏＆＃34;）不会滚动页面，即使容器及其父级（body标签）的高度为100％。我怀疑身体标签是问题，因为它将其作为浏览器窗口的100％，而不是整个页面。但如果我把它拿出来，div背景会缩小到内容。＆＃34;。个人＆＃34;是我的侧边栏＆＃34; .wrapper＆＃34;是我在页面上的主要内容。

我的样式标签/ CSS是什么样的：

<div class="style">
    <style>

body {
        margin: 0 auto; 
        position: absolute;
        height: 100%;
    }

.wrapper {
        width: 600px;
        margin-left: 20px;
        float: left;
    }

.personal {
        float:left;
        background-color: rgba(29, 32, 44, 0.85);
        color: snow;
        width: 300px;
        height: 100%;
    }

    </style>
</div>

我的HTML看起来像是什么：

<html>
  <head>
     <style> </style>
  </head>
    <body>
         <div class="personal"> content </div>
         <div class="wrapper"> content </div>
    </body>
<html>

Answer 1

为什么您的标签包含在div标签中？在没有DIV的情况下在html中插入样式，它将正常工作。

List<Person> result = realm.where(HomeJob.class).equalTo("name", "Jonathon").findAll();
    // you can use `RealmResults` as per your requirement


for (Person p :
            result) {
        Log.d("Result", "person name: "+p.getName());

    }

Answer 2

我必须更改几行才能完成这项工作。

https://jsfiddle.net/8e95zqmt/

有几个问题。如果你的元素没有box-sizing: border-box;样式，填充和边距会增加你的宽度。保证金仍然会增加宽度。因此，如果您的包装器为600px，那么margin-left: 20px就是620px。我将宽度更改为百分比，但如果您有更大的视口，则可以将其更改回px。 jsfiddle很小。

百分比高度也意味着它根据视口计算而不是内容。可能有一个我不知道的css解决方案，但我目前知道的唯一方法是使用javascript。

以下是示例，但原始静态宽度为

https://jsfiddle.net/vj4tu2zj/

Answer 3

.personal {
        background-color: rgba(29, 32, 44, 0.85);
        color: snow; 
        Position:fixed;
        left:0;
        width: 300px;
        height: -webkit-fill-available;
    }

使位置固定

Answer 4

很简单。只是改变＆＃34;身高＆＃34; to＆＃34; auto＆＃34;。

.personal {
        float:left;
        background-color: rgba(29, 32, 44, 0.85);
        color: snow;
        width: 300px;
        height: auto;
    }

div容器上的背景颜色不会随页面滚动

4 个答案: