其父母高度有限的可滾動段落

我想讓P能夠承載比高度所能包含的文字更多的文字，以便文字可以向下滾動以便閱讀。 DIV CLASS="others"有我想要的正確身高。（500px）其父母高度有限的可滾動段落

問題是，當我使用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"> 
 
\t <A HREF="#"><H3 ID="newsfeed">News</H3></A> 
 
\t <P>News will come here.</P> 
 
    </DIV> 
 
    <DIV ID="products"> 
 
\t <A HREF="#"><H3 ID="productsfeed">Products</H3></A> 
 
\t <P>Cool photos here.</P> 
 
    </DIV> 
 
</DIV>

來源

2014-09-20 Papu

爲什麼你在內部段落上設置'height：800px;'然後呢？這導致了這個問題。 – 2014-09-20 15:05:03

我試圖證明，如果我有很多文字，它將高達800px。或者正常的文本在代碼上會有不同的表示？ – Papu 2014-09-20 15:10:40

正如我在my comment提到的，問題是通過指定一個明確的高度內段造成的。

此外，爲了使內部的段落尊重父母的height（#news和#products它有自己的柔性容器的同一高度柔性的項目中，.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這樣的工具來實現這一點。

來源

2014-09-20 15:40:41

非常感謝。得到它的工作:) – Papu 2014-09-20 15:59:57

你需要一個包含div上的段落，然後設置overflow: scroll;和height: 460px;該容器（或任何你需要的高度，它已經包含在500px的高大.others塊內）。

您還需要確保.others div樣式不適用於該容器 - 在下例中，我將該選擇器更改爲.others > div，以僅選擇.others的直接子代。正如Hashem Qolami所說，你應該從內部段落中刪除height: 800px;。

jsfiddle example

來源

2014-09-20 15:39:48 nicolekanderson

謝謝你的回答。兩者都很有用:) – Papu 2014-09-20 15:58:23

其父母高度有限的可滾動段落

回答

相關問題