Question

我接管了网络应用程序，我正在尝试解决“小错误”。

问题是我有2个div：top div很小而且没有滚动，底部div更大而且应该滚动。问题是第二个div是滚动，但它在第一个div下面。

如何让它滚动而不是第一个？

一些HTML代码

<section style="height: 460px;" id="build-system" class="build-system-tabs-content">
    <div id="products-selector-content" class="content" data-projectid="8193">
        <div style="display: none;" id="choose-product" class="tab">
<div style="position: fixed;z-index:5; background: white; width:99%; top: 3.2em;">
    <div id="searchDiv">
        <form id="search-product-form">
            <label>Search for product:</label><br>
            <input autocomplete="off" class="ui-autocomplete-input" id="search-product-name" required="required" type="text"><span class="ui-helper-hidden-accessible" aria-live="polite" role="status"></span>
            <input value="Search" type="submit">
        </form>
    </div> .....

CSS代码：

.zones-system-creator {
    position: relative;
    overflow: hidden;
    margin: 0px;
    padding-right: 1em;
    min-height: 703px;
}

.zones-system-creator ul {
    list-style: outside none none;
    margin: 0px;
}

.bin-parts-contener {
    padding-top: 0.6em;
    background: #FFF none repeat scroll 0% 0%;
    position: fixed;
    width: 100%;
    z-index: 5;
    top: 0em; 
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.35);
}

.build-system-tabs-content {
    position: fixed;
    z-index: 3;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    height: 80%;
    min-width: 800px;
    margin-top: 2px;
}

.build-system-tabs-content .tab {
    overflow: hidden;
    display: none;
    position: relative;
    height: 100%;
    padding-top: 1em;
}

#create-system {
    background: transparent url("/Content/images/bg_grid_thin.png") repeat scroll 0% 0%;
    display: block;
}

.build-system-tabs-content .tab:nth-child(2) {
    padding-top: 10em;
}

更新1：

如何查找滚动条属于哪个div（或其他组件）？

Answer 1

我用透明做了标题，所以你可以看到内容div不在第一个。（我不明白为什么你需要这个，你不能使用position:fixed）

html, body {
 height:100%; 
  overflow:hidden;
  margin:0;
}

.header {
  background:rgba(0, 0, 0, 0.2);
  color:#000;
  height:20px;
}

.content {
  height:calc(100% - 20px);
  background:orange;
  overflow-y:scroll;
}

<div class="header">Header</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis rhoncus sapien at ultricies. Phasellus scelerisque convallis magna fermentum semper. Aenean non eros enim. Suspendisse sed metus dui. Nunc mi metus, finibus ut dui nec, facilisis hendrerit urna. Nullam ut mi eu metus laoreet tincidunt. Suspendisse fermentum metus a lorem ullamcorper finibus. In rhoncus orci et enim lacinia efficitur at vitae diam. Donec vitae iaculis purus. Vivamus maximus leo diam, sed euismod diam ornare eu. Donec semper vulputate metus, a rutrum sem viverra vitae. Donec ut sodales risus, non fringilla massa. Sed a nisl tristique, posuere mi eget, fermentum nisl. Nullam rhoncus imperdiet ipsum, et vulputate turpis egestas a. Pellentesque vehicula finibus iaculis.

Proin egestas purus in tellus consequat efficitur. Nunc dapibus elit a nibh consequat tincidunt. Suspendisse potenti. Morbi laoreet ligula euismod risus efficitur eleifend. Maecenas dolor magna, vulputate eu purus id, suscipit convallis mauris. Pellentesque malesuada interdum arcu. Etiam blandit ac arcu vel efficitur. Maecenas ut libero ac ex ultricies sodales commodo a libero. Curabitur id lectus vitae risus tempus efficitur et ut enim. Proin eget nunc a orci posuere ornare eget vel enim. Sed sagittis, neque nec dapibus scelerisque, odio urna tincidunt eros, vel aliquet diam nisl et ligula. Donec condimentum ullamcorper tortor sed pharetra. Aenean at pellentesque nisi.

Proin et dignissim nisl, a facilisis augue. Vivamus id arcu quis mi tincidunt tempor et sit amet lorem. Fusce vel consectetur sem. Aenean et dolor ut elit rutrum bibendum nec eget dui. Curabitur quis pharetra libero. Fusce elementum porttitor tellus a tincidunt. Nulla nisl arcu, elementum ut euismod ut, iaculis non ante. Mauris id ex venenatis, ultricies libero at, egestas nisi. Cras ultricies risus sit amet semper posuere. Sed a lacinia nisl, eget mattis purus. Duis consectetur, ligula at pulvinar porttitor, est turpis finibus arcu, ut interdum justo mauris nec purus. Nulla porttitor quis est ultrices tempus. Praesent at pretium libero. Donec a luctus massa. Nulla ac odio lobortis, volutpat ipsum et, commodo neque. Vivamus non dapibus neque.

Praesent mattis sem in mauris vulputate, at feugiat nunc euismod. Curabitur finibus quis risus vitae convallis. Morbi sit amet diam eu elit consectetur condimentum id eget ipsum. Nunc sem mi, pharetra eu tellus et, placerat viverra diam. Aenean aliquam erat urna, vel scelerisque nibh sollicitudin eu. Aliquam venenatis congue est, ac porttitor dolor dictum at. In diam mi, eleifend eget imperdiet eget, lobortis ut urna. Quisque et pulvinar justo, in ultricies purus. Nullam vitae diam eros. Phasellus posuere justo mauris, ac cursus nisi euismod porta. Etiam eget neque dapibus lectus pulvinar lacinia vitae sit amet lorem. Sed cursus turpis at mauris efficitur consectetur. Aenean et aliquet justo. Cras vel semper metus. In venenatis odio ut lacus bibendum faucibus.

Praesent arcu ex, venenatis non lectus ut, mollis cursus eros. Nullam tortor quam, tempor eu fermentum vitae, convallis finibus nulla. Fusce fringilla purus congue, varius arcu at, fermentum nisl. Vestibulum vestibulum eros id egestas ullamcorper. Curabitur ut diam nulla. Quisque efficitur dictum condimentum. Fusce nec turpis augue. Nulla vel eros in nisi congue fringilla. Phasellus diam elit, ullamcorper quis bibendum id, gravida vitae elit. Proin cursus sodales ipsum et interdum. Aenean ornare est eu felis cursus, venenatis bibendum mi condimentum. Praesent commodo arcu scelerisque efficitur tristique. Vivamus molestie euismod nunc eu volutpat. Suspendisse non urna a elit laoreet vehicula a luctus erat. Duis finibus nunc ex, non ullamcorper tellus fringilla id.
  
  Praesent arcu ex, venenatis non lectus ut, mollis cursus eros. Nullam tortor quam, tempor eu fermentum vitae, convallis finibus nulla. Fusce fringilla purus congue, varius arcu at, fermentum nisl. Vestibulum vestibulum eros id egestas ullamcorper. Curabitur ut diam nulla. Quisque efficitur dictum condimentum. Fusce nec turpis augue. Nulla vel eros in nisi congue fringilla. Phasellus diam elit, ullamcorper quis bibendum id, gravida vitae elit. Proin cursus sodales ipsum et interdum. Aenean ornare est eu felis cursus, venenatis bibendum mi condimentum. Praesent commodo arcu scelerisque efficitur tristique. Vivamus molestie euismod nunc eu volutpat. Suspendisse non urna a elit laoreet vehicula a luctus erat. Duis finibus nunc ex, non ullamcorper tellus fringilla id.
</div>

div正在滚动但是在第二个div下面

1 个答案: