Question

我有三个div并尝试在每个div上绘制一个边框。但它只在div的顶部显示一个边框，你可以看到here。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">

            .mydiv
            {
                position: relative;
                border:1px solid yellow;
            }


            .mydiv_content
            {
                position: absolute;
                border:1px solid red;
            }

            .mydiv_buttons
            {
                position: absolute;
                border:1px solid green;     /* D8D8D8 */
            }

        </style>
    </head>
    <body>
        <div class="mydiv">
            <div class="mydiv_content">
                <p> TEST 1</p>
            </div>

            <div class="mydiv_buttons">
                <br>
                <input type="submit" value="send"></input>
            </div>
        </div>
    </body>
</html>

我不知道为什么它只显示顶部的边框，如果有人可以向我解释这一点会很棒。您可以在jsfiddle上找到完整的代码。

Answer 1

这是因为您将height设置为%相对于div的父position:absolute并且未定义height，因为您正在使用它由于height:800%;属性而无效的position。

只需在height中定义父级的px：

.mydiv
{
    position: relative;
    border:1px solid yellow;    /* D8D8D8 */
    width:70%; 
    height:800px; // define the height
    margin-top: 100px;
    margin-left: 200px;
}

Answer 2

您的.mydiv元素未正确Height

.mydiv {
    position: relative;
    border: 1px solid yellow;
    width: 70%;
    height: 80px; //added
    margin-top: 100px;
    margin-left: 200px;
}

Working Demo

Answer 3

尝试将所有课程position:absolute;更改为position:relative;。或者删除子div中的position:absolute。

尝试摆脱子div高度。所以父母div中不会有巨大的空间。

示例查看我的演示。

我的Demo

仅显示div的上边框

3 个答案: