Question

为什么该div可水平滚动而不是垂直滚动？

.parent{
column-count:4;
background:gold;
margin:5px;
height:99px;
overflow-y:scroll;
}

<div class='parent'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum rhoncus ex venenatis auctor. Integer vel hendrerit massa. Nam non ipsum sodales, feugiat lorem ac, tristique magna. Sed hendrerit sem eu ante fermentum hendrerit. Suspendisse faucibus nisi laoreet orci lobortis pharetra. Mauris feugiat malesuada ullamcorper. Nulla facilisi. Fusce mattis finibus ex, eget volutpat dolor bibendum quis. Mauris consectetur sit amet urna at bibendum. 
</div>

我需要的是：
-四列
-指定的高度
-垂直滚动

有帮助吗？

Answer 1

那是因为您的div的高度没有超出屏幕使其可滚动，将父div包裹在另一个div内（例如主父），然后给其高度（给主父）小于父div的高度。滚动为主要父母

Answer 2

https://jsfiddle.net/yu1r9veh/3/

<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum rhoncus         ex venenatis auctor. Integer vel hendrerit massa. Nam non ipsum sodales, feugiat lorem     ac, tristique magna. Sed hendrerit sem eu ante fermentum hendrerit. Suspendisse     faucibus nisi laoreet orci lobortis pharetra. Mauris feugiat malesuada ullamcorper.     Nulla facilisi. Fusce mattis finibus ex, eget volutpat dolor bibendum quis. Mauris     consectetur sit amet urna at bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum rhoncus ex venenatis auctor. Integer vel hendrerit massa. Nam non ipsum sodales, feugiat lorem  ac, tristique magna. Sed hendrerit sem eu ante fermentum hendrerit. Suspendissefaucibus nisi laoreet orci lobortis pharetra. Mauris feugiat malesuada ullamcorper. Nulla facilisi. Fusce mattis finibus ex, eget volutpat dolor bibendum quis. Mauri consectetur sit amet urna at bibendum. 
</div>
</div>

您需要一个子代div，其高度与父代的高度相同（或更小），然后将溢出值放在父代上，且子代div的高度为最小值。由于其最小高度，子div的内容消耗很大，其父代的高度没有变化，因此必须垂直滚动才能访问该子内容。

.parent {
height: 100px;
overflow-y: scroll
}
.child {
column-count: 4;
background: gold;
margin: 5px;
min-height: 100px
}

Answer 3

由于列的原因，这很棘手。您必须使用具有所需高度的wrapper元素，并将更大的高度应用于父类元素

html

<div class="wrapper">
  <div class="parent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum rhoncus ex venenatis auctor. Integer vel hendrerit massa.  Nam non ipsum sodales, feugiat lorem ac, tristique magna. Sed hendrerit sem eu ante fermentum hendrerit. Suspendisse faucibus nisi laoreet orci lobortis pharetra. Mauris feugiat malesuada ullamcorper. Nulla facilisi. Fusce mattis finibus ex, eget volutpat dolor bibendum quis. Mauris consectetur sit amet urna at bibendum. 
  </div>
</div>

css

.wrapper {
overflow-y: scroll;
overflow-x: hidden;
height: 99px;
}

.parent {
column-count: 4;
background: gold;
margin: 5px;
height: 300px;
overflow-y: hidden;
overflow-x: hidden;
}

和一个jsfiddle

具有指定高度并垂直滚动的multicolumn div

3 个答案: