Question

我想让P能够获取比高度可以包含的文本更多的文本，这样就可以向下滚动文本以进行阅读。 DIV CLASS="others"有我想要的正确高度。（500像素）

问题是，当我使用overflow: scroll函数时，它会一直到页面底部。

编辑：忘记提及我希望标题“新闻”和“产品”没有滚动条。

感谢。

.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}

.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}

.others #news {
background-color: black;
color: white;
text-align: center;
}

.others #products {
background-color: black;
color: white;
text-align: center;
}

.others a {
color: white;
text-decoration: none !important;
}

.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}

.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}

<DIV CLASS="others">
  <DIV ID="news">
	<A HREF="#"><H3 ID="newsfeed">News</H3></A>
	<P>News will come here.</P>
  </DIV>
  <DIV ID="products">
	<A HREF="#"><H3 ID="productsfeed">Products</H3></A>
	<P>Cool photos here.</P>
  </DIV>
</DIV>

Answer 1

正如我在my comment中提到的，问题是由内部段落指定显式高度引起的。

此外，为了使内部段落尊重其父项的height （#news和#products flex项目，其Flex容器的高度相同， .other）您也可以将父级的display类型更改为flex，并将flex-direction设置为column。

然后将flex: 1;提供给以下段落：

<强> Example Here

#news, #products {
    display: flex;
    flex-direction: column;
}

#news p, #products p {
    flex: 1;
    overflow: auto; /* up to you */
}

作为旁注：为了支持浏览器，请确保您已经包含了flexbox的旧（带前缀）语法。您可以使用Auto Prefixer之类的工具来实现这一目标。

Answer 2

您需要在段落上包含div，然后在该容器上设置overflow: scroll;和height: 460px;（或者在500px高{{1}内包含它所需的任何高度}）。

您还需要确保您的.others样式不适用于该容器 - 在下面的示例中，我将该选择器更改为.others div，仅选择{{1}的直接子项}}。如Hashem Qolami所述，您应该从内部段落中删除.others > div。

jsfiddle example

可滚动的段落，其父级的高度有限

2 个答案: