Question

我无法想出一个标题来描述我的潜在问题。我已经构建了一个datepicker插件，可以在我测试的浏览器中正常工作。但是这件事让我感到困惑，我需要一些安慰的话。这是一个常规的输入字段，当点击一个窗口弹出它允许你选择日期和东西时，这就是我完成“弹出”部分的方式

HTML

<div class='wrapper'>
    <div class='title'>
        Choose date
        <span class='close'>X</span>
    </div>
    <div class='window'> ... </div>
</div>
<input class='datepicker'>

CSS

.wrapper { position:relative; }
.title { position:absolute; bottom:0; left:0 }
.window { position:absolute; top:0; left:0; }

所以它似乎是一个有效的结构，并且wrapper在输入字段之前我保证覆盖它，但是它是关于没有高度的div的部分，它包含一堆元素上下它不会给我休息。这是一个好的做法，如果不是，我怎么能这样做？

Answer 1

可能不是。设置实际呈现日期选择器大小的min-height和min-width。这样你就有了一点摆动空间，以防客户端的浏览器渲染得比你的大，你不必担心可能会崩溃的div。

相对于它的相对容器，绝对元素将明确地告诉它们。

我认为包装器应该设置最小值，因为CSS中没有提到的宽度或高度。

真的，你点击加载日期选择器的区域应该是相对的，第一项（你的GUI /日期选择器的包装器）应该是绝对的，然后里面的所有元素应该是相对的（或静态，但不是绝对的）。这样你的绝对容器里面就有内容，因为绝对容器在正常（静态/相对）内容流之外，类似于浮点数。

如果你的标题高度为100px，而你的日期选择器高度为200px，而你的包装器高度只有250px，那么50px会陷入困境（重叠，因为top:0而另一个{{1 }}）

所以回顾一下.. relative＆lt;绝对＆lt;相对（或静态）+相对（或静态），我仍然会在绝对层上设置最小宽度/最小高度。尝试使用显示的日期选择器（控制和+）进行缩放，以查看它是否有任何问题。如果它一直放大而没有任何问题，你可能会没事。

没有高度的相对div保持绝对元素。这是好习惯吗？

HTML

CSS

1 个答案: