Question

我有一个带有内容div的非滚动页面，我希望在它增长时动态滚动到列表的长度。

见下面的代码

body {
    font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
    font-size: 1em;
    color: #feffb7;
    background: #000000 url(bg.jpg) no-repeat center center fixed;
    margin: 0px;
    background-size: cover;
    height: 100%;
    padding: 0px;
    overflow-y: hidden;
}
.middleearth {

    background: rgba(0, 0, 0, 0.4);
    margin-left: 19%;
    width: 62%;
    margin-bottom: 10px;
}

.content {
    padding: 30px;
    padding-top: 1px;
}

#loadin {
    border: 1px solid #cbcd65;
    overflow: scroll;
    height: 100%;
}

<body>

<div class="title">
    SCUBA Police
</div>

<div class="menu">
<div class="menubar">

<?php include 'menu.html';?>

    </div>
</div>

<div id="contain">

<div class="middleearth">
<div class="content">
    <h2>Echo</h2>
    <div id="loadin">

<?php include 'echolist.html';?>

    </div>
</div>
</div>

</div>

<?php include 'footer.html';?>

</body>

问题：我在loadin div中有一个滚动条，但内容仍然在页面底部下方运行，我实际上无法滚动。

Answer 1

你的溢出没有问题，问题是你的装载＆＃39;高度，试试这个固定高度的片段：

＆＃13;

body {
    font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
    font-size: 1em;
    color: #feffb7;
    background: #000000 url(bg.jpg) no-repeat center center fixed;
    margin: 0px;
    background-size: cover;
    height: 100%;
    padding: 0px;
    overflow-y: hidden;
}
.middleearth {

    background: rgba(0, 0, 0, 0.4);
    margin-left: 19%;
    width: 62%;
    margin-bottom: 10px;
}

.content {
    padding: 30px;
    padding-top: 1px;
}

#loadin {
    border: 1px solid #cbcd65;
    overflow: scroll;
    height: 100px;
}

＆＃13;

<body>

<div class="title">
    SCUBA Police
</div>

<div class="menu">
<div class="menubar">


    </div>
</div>

<div id="contain">

<div class="middleearth">
<div class="content">
    <h2>Echo</h2>
    <div id="loadin">
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
      lorem ipsum <br/>
    </div>
</div>
</div>

</div>


</body>

＆＃13;

Answer 2

如果您需要修改内容，则需要指定高度，如500px;

＆＃13;

body {
font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
font-size: 1em;
color: #feffb7;
background: #000000 url(bg.jpg) no-repeat center center fixed;
margin: 0px;
background-size: cover;
height: 100%;
padding: 0px;
overflow-y: hidden;
}
.middleearth {

background: rgba(0, 0, 0, 0.4);
margin-left: 19%;
width: 62%;
margin-bottom: 10px;
}

.content {
padding: 30px;
padding-top: 1px;
}

#loadin {
border: 1px solid #cbcd65;
overflow: scroll;
height: 500px;
}

＆＃13;

<body>

<div class="title">
    SCUBA Police
</div>

<div class="menu">
<div class="menubar">

<?php include 'menu.html';?>

    </div>
</div>

<div id="contain">

<div class="middleearth">
<div class="content">
    <h2>Echo</h2>
    <div id="loadin">

<?php include 'echolist.html';?>

    </div>
</div>
</div>

</div>

<?php include 'footer.html';?>

</body>

＆＃13;

Div滚动和溢出

2 个答案: