Question

我从一位同事那里继承了一个项目，我面临着一个我无法解决的非常奇怪的行为。

它是一个HTML页面，即使它比屏幕长，它也不会显示滚动条，也无法滚动甚至用鼠标滚轮。我尝试使用Chrome检查器深入查看CSS，但无法使其可滚动。

我在页面的末尾添加了一个大的div，带有红色边框，因此更容易看到问题。

这是一个现场演示：http://mobile.natuplan.com/mobileapp/add-demo.aspx

编辑：我已经尽可能简化了发布一些代码的页面：

<h3 class="modal-wnd"><a href="#" onclick="Close();" class="btn-back"><i class="fa fa-arrow-left"></i></a>
    Nuova Richiesta</h3>
<div class="content-wnd modal-wnd">
    <div id="pnlInsert" runat="server">
        <div>
            some content here...<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br /><br /><br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
        </div>
        <div id="bottom-spacer"></div>
    </div>

</div>

和CSS：

#bottom-spacer { border: 3px dashed red ;height:550px;}
#pnlInsert{overflow-y:auto;}
.modal-wnd{}
.modal-wnd.content-wnd {
    padding: 10px 15px 10px 10px;
    margin-top: 40px; }

Answer 1

在你的CSS添加

#bottom-spacer {
    overflow: auto;
}

当内容超出div的高度时，它将添加滚动条。

＆＃13;

#bottom-spacer {
    border: 3px dashed red;
    height: 90px;
    overflow: auto;
}

HERE IS AN EXAMPLE

＆＃13;

<div id="bottom-spacer">
dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd 
</div>

＆＃13;

未显示垂直滚动条

1 个答案: