我只想顯示底部內容。最初我將隱藏值賦予overflow-x 和overflow-y 屬性，然后我想顯示位于y 方向底部的內容。這是我的代碼：
<div class="parent">
<p class="child">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, sed. Ducimus at ex quo tenetur
accusamus cupiditate accusantium officiis. Recusandae libero natus similique ea amet aut quae accusamus,
neque ad!
</p>
</div>
CSS：
.parent {
position: relative;
border: 2px solid black;
width: 200px;
height: 100px;
overflow-x: hidden;
overflow-y: hidden;
}
.child {
position: absolute;
transform: translate(50px, -50px);
}
你可以檢查codepen
uj5u.com熱心網友回復：
也許這不是您期望的最終結果，而是一種方法。我在這里所做的是創建一個.wrapper以隱藏滾動條（你能在附加的 CSS 中看到如何）。然后只overflow-y: scroll給.parent.
如果這不是您想要的結果，請回傳更多資訊。
.wrapper {
width: 200px;
height: 100px;
border: 2px solid black;
overflow: hidden;
}
.parent {
position: relative;
width: calc(100% 20px);
height: inherit;
padding-right: 20px;
overflow: hidden;
overflow-y: scroll;
}<div class="wrapper">
<div class="parent">
<p class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, sed. Ducimus at ex quo tenetur accusamus cupiditate accusantium officiis. Recusandae libero natus similique ea amet aut quae accusamus, neque ad!</p>
</div>
</div>uj5u.com熱心網友回復：
我不確定您是否需要將容器保持在當前大小 - 如果需要，請使用overflow-y: scroll. 否則，這里有一個替代樣式，它不會將容器限制在特定高度。
.wrapper {
width: 200px;
border: 2px solid black;
overflow: hidden;
padding: 1rem;
}
.parent {
position: relative;
width: 100%;
height: inherit;
padding-right: 20px;
}<div class="wrapper">
<div class="parent">
<p class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, sed. Ducimus at ex quo tenetur accusamus cupiditate accusantium officiis. Recusandae libero natus similique ea amet aut quae accusamus, neque ad!</p>
</div>
</div>uj5u.com熱心網友回復：
我不認為我完全得到你想要的結果。但是如果你只是想展示孩子的底部，你可以簡單地穿上bottom: 0你的孩子，因為你正在使用定位。使用填充而不是翻譯總是好的，因為翻譯會很快把你的整個網站搞得一團糟。
.parent {
position: relative;
border: 2px solid black;
width: 200px;
height: 100px;
overflow-x: hidden;
overflow-y: hidden;
padding: 10px;
}
.child {
position: absolute;
bottom: 0;
margin: 0;
}<div class="parent">
<p class="child">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, sed. Ducimus at exquotenetur accusamus cupiditate accusantium officiis. Recusandae libero natus similique ea amet aut quae accusamus, neque ad!
</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/437217.html