固定div位置在删除条件sub时缩小
固定div位置在删除条件sub时缩小
提问于 2019-12-27 10:18:56
我想实现购物车div有固定的位置和覆盖25-30%的屏幕。就像这样。
这是我的Html文件
<div class="container-fluid" style="position:fixed;margin-right: 6ex;">
<div class="row" >
<div class="text-center">
<span>WarenKorb</span>
</div>
<hr>
<div *ngIf="this.orderedItems.length < 1">
<p style="text-align: center;"><span class="glyphicon glyphicon-shopping-cart"></span></p> <br>
<span class="emptybucket">Wähle leckere Gerichte aus der Karte und bestelle Dein Menü.</span>
</div>
<div class="row" *ngFor="let item of orderedItems;let i = index">
<div class="col-sm-1">
<span>{{item.quantity}}</span>
<span style="color:#7d7d7d; font-size: 10px;">x</span>
</div>
<div class="col-sm-4">
<div class="row">
<span >{{item.name}}</span></div>
<div class="row">
<span style="font-family: 'Courier New', Courier, monospace;font-style: italic;">({{item.size}})</span>
</div>
<div class="row">
<span style="font-family: 'Courier New', Courier, monospace;font-style: italic;font-size: 12px;">{{getOderAdditionsText(i)}}</span></div>
</div>
<div class="col-sm-4" style="align-content: center;">
<button type="button" (click)="decreaseQuantity(item)" style="background-color: white;" class="btn btn-default btn-sm">
<span class=" glyphicon glyphicon-minus"></span>
</button>
<button type="button" (click)="increaseQuantity(item)" style="background-color: white;" class="btn btn-default btn-sm">
<span class=" glyphicon glyphicon-plus"></span>
</button>
</div>
<div class="col-sm-1">
<span>
<a>
<span (click)="deleteTheItemFromOrder(item)" class="glyphicon glyphicon-trash"></span>
</a>
</span>
</div>
<div class="col-sm-1 pull-right">
<span>{{item.totalPrice}}€</span>
</div>
</div>
<hr>
<div class="row">
<span class="pull-left" style="margin-left: 3rem;font-size: 15px;"><b>Summe </b></span>
<span class="pull-right">{{OrderSum}}€</span>
</div>
<hr>
<div class="row" style="margin-left: 3rem;color:#7d7d7d;">
<span *ngIf="orderCannotBeDelivered"> Leider kannst Du noch nicht bestellen. wir liefern erst ab einem
Mindestbestellwert von 15,00 € (exkl. Lieferkosten)</span>
</div>
<div>
<button style="margin-left:3rem;margin-right: -2px;" [disabled]="this.orderedItems.length < 1"
class="btn btn-primary btn-lg btn-block" (click)="submitOrder()">Bestellen</button>
</div>
现在，我的html文件中的以下div是条件div。
<div class="row" style="margin-left: 3rem;color:#7d7d7d;">
<span *ngIf="orderCannotBeDelivered"> Leider kannst Du noch nicht bestellen. wir liefern erst ab einem
Mindestbestellwert von 15,00 € (exkl. Lieferkosten)</span>
</div>这意味着用户只能在一定数量后才能订购。
以下是显示条件文本时的外观。
这就是当条件文本不再存在时的样子。
我想提供代码，但不知何故Stackblitz给了我错误。我希望给定的细节足够了。任何帮助都将不胜感激。谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-31 13:12:50
据我所知，您只能选择使用style属性标签来修改css。在您提供的HTML代码的第一行中，您拥有
position: fixed我会改成
position: sticky;
top: 0;因此，这将向下滚动，即使左(主)内容具有更大的高度。
因此，您的html的第一行应该改为：
<div class="container-fluid" style="position: sticky; top: 0; margin-right: 6ex; width: 100%">注意，我还添加了width: 100%，因为您在两个图像中都描述了这是内容的条件。
还要注意，父元素应该被设置为position: relative (您没有提供父元素的代码)。
如果我理解错了，请尝试再次向我解释，我会相应地更新我的答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59499216
复制相关文章
相似问题
位置固定div缩小时去远
缩放时固定div位置
固定div位置
Div位置固定
位置DIV，位置绝对高于DIV，位置固定
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
