Question

在我的网站中，我有两个主要divs - 一个用于顶部的横幅，另一个用于主要内容。它们都包含内部元素，如imgs，iframes等。但我不认为这对我的问题非常重要：如何为主要内容制作滚动条横幅不重叠？

如果有帮助，您可以在actual website上查看my github的来源。但是为了节省浪费时间，我在html中写了一个小片段来说明这个问题：

＆＃13;

document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}

#header {
  position: fixed;
  background-color: teal;
  z-index: 1;
  top: 0;
  height: 100px;
  width: 100%;
}

#main {
  postion: absolute;
  top: 100px;
}

＆＃13;

<body>

<div id="header">
header
</div>

<div id="main">
<pre id="someText"></pre>
</div>

</body>

＆＃13;

可能很难看到SO上的代码段，但右侧的scroll bar与横幅重叠，而我想要的是它在到达横幅时停止。< / p>

我已尝试（在CSS）设置正文的overflow为hidden，因为这是与横幅重叠的scroll bar，但这只是完全删除它所以我不能滚动 - 显然不是我想要的......

我还尝试将overflow-y main的{{1}}设置为div，但这不起作用，scroll确实出现在我需要的地方它，但bar是不可用的。

Answer 1

我为你创造了一个小提琴： https://jsfiddle.net/3gvowvag/1/

您的HTML和JS保持不变。对于你的CSS：

html, body

因此，更改基本上是为了overflow-y: hidden #main和max-height width和100% overflow-y: scroll以及version: '3' services: nginx: image: nginx:latest container_name: ngnix01 ports: - "8100:8000" volumes: - ./code:/code - ./config/nginx:/etc/nginx/conf.d depends_on: - web networks: - default web: build: . container_name: django01 command: bash -c "pip install Django && cd /home/docker/code python manage.py makemigrations && python manage.py migrate && gunicorn mydjango.wsgi -b 0.0.0.0:8000" depends_on: - db volumes: - ./code:/code expose: - "8000" networks: - default db: image: postgres:latest container_name: postgres01 networks: - default networks: default:。

这基本上可以满足您的需求 - 尽管我对这样设置页面没有百分之百的信心。通过像素的绝对定位和偏移有点老了，也设置了溢出-y隐藏为html / body，不确定这些东西将如何长期表现。但如果没有进一步的背景，很难完全想到这一点。

P.S。：真棒猫！

Answer 2

您只需将overflow-y: hidden;添加到正文（请查看此previous answer），然后将overflow-y: scroll;应用于#main div。

document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(30);

html, body {
  margin: 0;
  padding: 0;
}

body {
  overflow-y: hidden;
}

#header {
  position: fixed;
  background-color: teal;
  z-index: 1;
  top: 0;
  height: 100px;
  width: 100%;
}

#main {
  postion: absolute;
  top: 100px;
  overflow-y: scroll;
}

<body>

<div id="header">
header
</div>

<div id="main">
<pre id="someText"></pre>
</div>

</body>

Answer 3

使用flexbox布局时，您可能会发现这更容易。也许这样的事情。例如，如果您不想看到灰色滚动条

，请将溢出设置为自动

CloseableHttpClient client = HttpClientBuilder.create().build();
HttpGet post = new HttpGet(url);
HttpResponse response = client.execute(post);
System.out.println("Response Code : "
                + response.getStatusLine().getStatusCode());

String response2= EntityUtils.toString(response.getEntity(), "UTF-8");
JSONArray jsonArray = new JSONArray(response2);
System.out.println(jsonArray);

设置滚动条的位置

3 个答案: