我想创建几乎与 Facebook 图像模式完全相同的东西，其中图像在用户滚动评论时是固定的。我弄乱了不同的方式来应用overflow: hidden到一个 div 和overflow: scroll另一个。我什至考虑将其应用于他们的父母。这是我尝试过的代码：<div class="row container border border-primary"> <div class="image col border"> Image </div> <div class="text-section col border"> Comments </div></div>div.image { height: 300px; overflow: hidden;}div.text-section { height: 1000px; overflow: scroll;}div.container { height: 300px;}
2 回答
回首忆惘然
TA贡献1847条经验 获得超11个赞
我没有 facebook，所以无法查看行为，但您可以放在position: sticky;图像容器上，这样可以将其保持在适当的位置。这也取决于你的浏览器支持，比如 ie11不支持，但还有更多方法可以做到这一点。如果您需要更多跨浏览器解决方案，请告诉我。
.container {
max-height: 600px;
height: 100%;
overflow: auto;
position: relative;
}
div.image {
height: 300px;
background-color: deepskyblue;
position: sticky;
top: 0;
}
div.text-section {
height: 1000px;
background-color: aqua;
}
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
HUX布斯
TA贡献1876条经验 获得超6个赞
我想像这样的代码。蓝色（图像）保持固定在左侧，而您可以滚动右侧的绿色部分（评论）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消