Question

我需要创建一个包含4个元素的页面：标题，元素过滤器，项目列表和项目。但我无法在没有主页滚动的情况下设置div。我想只有一个滚动条 - 在item-list？

＆＃13;

html,
body {
    margin: 0;
    height: 100%;
}

.header {
    background-color: cadetblue;
    height: 3em;
    width: 100%;
}

.space {
    width: 25em;
    height: 100%;
}

.filter {
    width: 100%;
    height: 5em;
    background-color: darkblue
}

.item-list {
    height: 100%;
    margin: 0.2em;
    overflow: auto;
}

.item {
    background-color: burlywood;
    height: 20em;
    width: 100%;
}

＆＃13;

<body>
    <div class="header"></div>
    <div class="space">
        <div class="filter"></div>
        <div class="item-list">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

＆＃13;

有人可以帮我这个吗？

Answer 1

您可以通过在标题上设置静态高度并在空格元素上使用calc来避免在主元素上使用Scroll，就像示例一样。

＆＃13;

html,
body {
    margin: 0;
    height: 100vh;
}

.header {
    background-color: cadetblue;
    height:20px;
    width: 100%;
}

.space {
    width: 25em;
    height: calc(100% + -30px);
    position:relative;
}

.filter {
    width: 100%;
    height: 20%;
    background-color: darkblue
}

.item-list {
    height: 80%;
    margin: 0.2em;
    overflow: auto;
}

.item {
    background-color: burlywood;
    height: 20em;
    width: 100%;
}

＆＃13;

<body>
    <div class="header"></div>
    <div class="space">
        <div class="filter"></div>
        <div class="item-list">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

＆＃13;

Answer 2

您可以使用弹性和溢出：

html,
body {
    margin: 0;
    height: 100%;
}
/* === flex update ====*/
body, .space {/* display:flex and overflow:hidden */
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.space, .item-list {/* fill whole space avalaible */
flex:1;
}

.item-list {
    overflow: auto;/* overflow ...*/
    background:gray /* debug, see me */
}

/* === end flex update ====*/

.header {
    background-color: cadetblue;
    height: 3em;
}

.space {
    width: 25em;
}

.filter {
    width: 100%;
    height: 5em;
    background-color: darkblue
}

.item-list {
    margin: 0.2em;
}

.item {
    background-color: burlywood;
    height: 20em;
    width: 100%;
}

<div class="header"></div>
    <div class="space">
        <div class="filter"></div>
        <div class="item-list">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

Answer 3

从.item-list中删除overflow：auto 并使.item类高度为100％而不是20em。

希望这将满足您的要求。

如何使用所有页面上的项目创建<div>，而不使用滚动条？

3 个答案: