html - 固定的 div 位置在删除条件子 div 时缩小

Question

我想实现具有固定位置并覆盖屏幕 25-30% 的购物车 div。像这样。

这是我的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>

这意味着只有在一定数量后才允许用户订购。

这是显示条件文本时的样子。

![Div with amount less than 15] 2

这就是条件文本不再存在时的样子。

![cart div shrinked] 3

我想提供代码，但不知何故 Stackblitz 给我错误。我希望给出的细节足够了。任何帮助将不胜感激。谢谢

Answer 1

据我了解，您只能选择使用 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(您未提供父元素的代码)。

如果我理解有误，请尝试再次向我解释，我会相应地更新我的答案。