Html 如何使div垂直滚动

How to make a div vertically scrollable

提问by SARAVANA KUMAR

I made a horizontal scroll with a list of picture elements.. But when I made to scroll it vertically I failed to do it.

我做了一个带有图片元素列表的水平滚动..但是当我垂直滚动它时我没有做到。

my code for the horizontal scroller is

我的水平滚动条代码是

<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
    <div class="pic-row">
        <div id="divd" style="width: 1680px;">
            <a href="writeA.html"><img src="images/A.Png" /></a>
            <a href="writeB.html"><img src="images/B.Png" /></a>
            <a href="writeC.html"><img src="images/C.Png" /></a>
            <a href="writeD.html"><img src="images/D.Png" /></a>
            <a href="writeE.html"><img src="images/E.Png" /></a>
            <a href="writeF.html"><img src="images/F.Png" /></a>
            <a href="writeG.html"><img src="images/G.Png" /></a>
            <a href="writeH.html"><img src="images/H.Png" /></a>
            <a href="writeI.html"><img src="images/I.Png" /></a>
            <a href="writeJ.html"><img src="images/J.Png" /></a>
            <a href="writeK.html"><img src="images/K.Png" /></a>
            <a href="writeL.html"><img src="images/L.Png" /></a>
            <a href="writeM.html"><img src="images/M.Png" /></a>
            <a href="writeN.html"><img src="images/N.Png" /></a>
            <a href="writeO.html"><img src="images/O.Png" /></a>
            <a href="writeP.html"><img src="images/P.Png" /></a>
            <a href="writeQ.html"><img src="images/Q.Png" /></a>
            <a href="writeR.html"><img src="images/R.Png" /></a>
            <a href="writeS.html"><img src="images/S.Png" /></a>
            <a href="writeT.html"><img src="images/T.Png" /></a>
            <a href="writeU.html"><img src="images/U.Png" /></a>
            <a href="writeV.html"><img src="images/V.Png" /></a>
            <a href="writeW.html"><img src="images/W.Png" /></a>
            <a href="writeX.html"><img src="images/X.Png" /></a>
            <a href="writeY.html"><img src="images/Y.Png" /></a>
            <a href="writeZ.html"><img src="images/Z.Png" /></a>
        </div>

The css I used is as follows

我使用的css如下

.pic - container {
  /* The width of mydocument */
  width: 1350 px;
  margin: 0 auto;
  white - space: nowrap;
  overflow - x: inherit;
  overflow - y: hidden; -
  ms - overflow - style: -ms - autohiding - scrollbar;

}
.pic - row {
  /* As wide as it needs to be */
  width: 1527 px;
}

Please Guide me to found a solution to make that horizontal scrolling div into vertical scrolling

请指导我找到一个解决方案，使水平滚动 div 变成垂直滚动

回答by SARAVANA KUMAR

Use the css below

使用下面的css

.pic-container {
    width: 50px;
    height: 200px;
    overflow-y: scroll;
    overflow-x:hidden;
}

EDIT :- Added a '.' before the class name see the fiddle link HERE

编辑 :- 添加了一个 '.' 在类名之前，请参阅此处的小提琴链接

回答by Ankit Agrawal

you have to set fix height of your main div for horizontal scroll and if your inside content height exceed height of main div then horizontal scroll will come.

您必须为水平滚动设置主 div 的固定高度，如果您的内部内容高度超过主 div 的高度，则会出现水平滚动。

.pic-container {
  width: 1350px;
  margin: 0 auto;
  white-space: nowrap;
}

.pic-row {
  /* As wide as it needs to be */
  width: 1350px;
  height: 400px;
  overflow: auto;
}

.pic-row a {
  clear: left;
  display: block;
}

<div class="pic-container">
  <div class="pic-row">
    <a href="writeA.html"><img src="images/A.Png" /></a>
    <a href="writeB.html"><img src="images/B.Png" /></a>
    <a href="writeC.html"><img src="images/C.Png" /></a>
    <a href="writeD.html"><img src="images/D.Png" /></a>
    <a href="writeE.html"><img src="images/E.Png" /></a>
    <a href="writeF.html"><img src="images/F.Png" /></a>
    <a href="writeG.html"><img src="images/G.Png" /></a>
    <a href="writeH.html"><img src="images/H.Png" /></a>
    <a href="writeI.html"><img src="images/I.Png" /></a>
    <a href="writeJ.html"><img src="images/J.Png" /></a>
    <a href="writeK.html"><img src="images/K.Png" /></a>
    <a href="writeL.html"><img src="images/L.Png" /></a>
    <a href="writeM.html"><img src="images/M.Png" /></a>
    <a href="writeN.html"><img src="images/N.Png" /></a>
    <a href="writeO.html"><img src="images/O.Png" /></a>
    <a href="writeP.html"><img src="images/P.Png" /></a>
    <a href="writeQ.html"><img src="images/Q.Png" /></a>
    <a href="writeR.html"><img src="images/R.Png" /></a>
    <a href="writeS.html"><img src="images/S.Png" /></a>
    <a href="writeT.html"><img src="images/T.Png" /></a>
    <a href="writeU.html"><img src="images/U.Png" /></a>
    <a href="writeV.html"><img src="images/V.Png" /></a>
    <a href="writeW.html"><img src="images/W.Png" /></a>
    <a href="writeX.html"><img src="images/X.Png" /></a>
    <a href="writeY.html"><img src="images/Y.Png" /></a>
    <a href="writeZ.html"><img src="images/Z.Png" /></a>
  </div>
</div>

回答by Adelmar

Try this:

尝试这个：

index.html:

索引.html：

.pic-container {
  width: 600px;
  height: 600px;
  overflow-y: scroll;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="pic-container">
    <a href="writeA.html"><img src="images/A.png" /></a>
    <a href="writeB.html"><img src="images/B.png" /></a>
    <a href="writeC.html"><img src="images/C.png" /></a>
    <a href="writeD.html"><img src="images/D.png" /></a>
    <a href="writeE.html"><img src="images/E.png" /></a>
  </div>
</body>

</html>