Question

我想向我的secundary div添加滚动条，我添加了width和height：

＆＃13;

#primary {
  width: 100%;
  height: 15%;
}

#secundary {
  width: 100%;
  height: 85%;
  overflow: scroll;
}

＆＃13;

<div id="primary">
  <!-- content -->
</div>
<div id="secundary">
  <!-- content -->
</div>

＆＃13;

我尝试使用overflow: scroll属性，但我在secundary div中看不到任何滚动条。

Answer 1

#primary {
  width: 100%;
  height: 15%;
}

#secundary {
  width: 100%;
  height: 100px;
  overflow: scroll;
}

<div id="primary">
  <!-- content -->
</div>
<div id="secundary">
  text text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text
</div>

内容需要“溢出”： https://developer.mozilla.org/en/docs/Web/CSS/overflow

Answer 2

试试这段代码：

https://output.jsbin.com/sugelod

import { Connector } from 'redux/react;

<Connector select={state => ({
                            center: state.map.get('mapInfo').get('center'),
                            zoom: state.map.get('mapInfo').get('zoom'),
                            markers: state.map.get('dataFiltered'),
                            visibleRowFirst: state.map.get('tableRowsInfo').get('visibleRowFirst'),
                            visibleRowLast: state.map.get('tableRowsInfo').get('visibleRowLast'),
                            maxVisibleRows: state.map.get('tableRowsInfo').get('maxVisibleRows'),
                            hoveredRowIndex: state.map.get('tableRowsInfo').get('hoveredRowIndex'),
                            openBallonIndex: state.map.get('openBalloonIndex')
                        })}>
                            {({dispatch, ...mapProps}) => (
                                <Map {...mapProps}
                                     {...bindActionCreators(mapActions, dispatch)}
                                />
                            )}
                        </Connector>

Answer 3

height的百分比值仅在父元素具有固定height值时才有效。目前，您的#secundary元素是body的孩子，body的高度设置为auto - 这是默认值 - 这使得{{1}根据孩子的身高，身高会有所不同。

您可以为body或#secundary定义固定的高度值。

示例：JSFiddle

将滚动条添加到<div>元素

3 个答案: