固定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。您没有提供父元素的代码。

如果我理解错了，请尝试再次向我解释，我将相应地更新答案。

（在德国Übersetzt州Klammern的Vielleicht大街，damit ich es besser nachvollziehen / verstehen和Dir helfen kann。）

Answer 2

使用行作为容器。不适合div可能是这个问题。或宽度大于最初价格的块