Question

我正在尝试在我正在处理的网站上显示一些数据。我创建了一个包含其中所有信息的div，但由于信息似乎从div溢出，我无法看到所有这些。我可以看到分隔符边缘的滚动条，但我似乎无法使用它，因为它是灰色的。以下是我的问题http://i.imgur.com/EU4aOG7.png的屏幕截图。我需要能够到达底部，因为有三个按钮，我无法访问没有滚动，但我无法弄清楚我应该做什么。我对Web开发很新，所以我可能会遗漏一些非常明显的东西，

<div className="learn-content mdl-typography--text-center"  style={{width: '80%', margin: 'auto'}}>
                <div className="grid">
                  <div className="card mdl-shadow--2dp">
                    <div className="card__title mdl-color--indigo mdl-color-text--white">
                      <h4 className="card__title-text">Purchaser Information</h4>
                    </div>
                    <div className="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
              
                      <p>Legal Name: {legalEntity}</p>
                      <p>Operating Name: {operatingName}</p>
                      <p>Role: {string_role[role]}</p>
                      <p>Address 1: {address1}</p>
                      <p>Address 2: {address2}</p>
                      <p>City: {city}</p>
    //many more lines of information here <-- not actually in code.
                <div>
                <Button accent ripple onClick={this.approve.bind(this,key_name,role)} className="mdl-color-text--indigo btn btn-primary">Approve</Button>
                <Button accent ripple onClick={this.reject.bind(this,key_name,role)} className="mdl-color-text--indigo btn btn-primary">Reject</Button>
                <Button accent ripple onClick={this.return_back.bind(this)} className="mdl-color-text--indigo btn btn-primary">Back</Button>
                </div>

有更多信息要显示，我只是没有显示整个代码文件，因为有超过1000行。请让我知道

Answer 1

您需要在CSS中添加以下内容：

#messagesDiv {
overflow-y: scroll;
}

为什么我的div不可滚动，以及如何实现？

1 个答案: