Question

我有这段代码将absolute div显示为relative div。

HTML：

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="relative">
                    <div class="absolute">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div>

                </div>
            </div>
            <div class="col-md-12">
               normal text added
            </div>    
        </div>
    </div>
</section>

的CSS：

.relative {
    position: relative;
    height:auto;
    background-color:#e1e1e1;
}
.absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    width: auto;
    background-color:#f5f5f5;
    margin:0 15px;
}

实际上，当我为height:auto设置relative div时，此div未显示。如果我设置任何height值，即：height:150px;相对div，则它会起作用并显示为真。我该如何解决这个问题？

demo here

Answer 1

您无法使用css执行此操作，并且需要使用position:absolute设置外部div的高度，以便显示内部<div>。

这是因为当你将[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")] public DateTime StartDate { get; set; }设置为position：absolute时，外部容器不再具有宽度和高度的概念，并且不会容纳它占用的空间。

Answer 2

添加溢出：隐藏;最小高度：100像素;

.relative {
    position: relative;
    height:auto;
    overflow :hidden;
    min-height:100px;
    background-color:#e1e1e1;
}

Answer 3

这里的诀窍

CSS

.relative {
  position: relative;
    overflow :hidden;
    min-height:100px;
    background-color:#e1e1e1;
}
.absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    width: auto;
    background-color:#f5f5f5;
    margin:0 15px;
        overflow: auto;
    height: 100px;
}

DEMO

设置相对高度和绝对高度

CSS height auto在相对DIV中不起作用

3 个答案: