Question

所以我不确切地知道如何询问我在寻找什么，所以我可能只是发布图片。

我有这个盒子，它包含2个div，彼此相邻。 Div with border-right和content div：

enter image description here

这是HTML结构：

<div id="box">
    <div class="dblline">

    </div>
    <div contenteditable="true" class="content">
           *content goes here*
    </div>

</div>

现在您可以看到，内容所在的位置是可编辑的，因此在您键入时可以扩展其高度。 border-right div具有min-height，因此当内容区域扩展时可以扩展（？）但它似乎不起作用，这里有问题：

如何在内容展开时展开边框，使其看起来不像这样：

enter image description here

这是我的CSS：

#box {width:200px;border:1px solid grey}

.dblline {border-right:3px solid rgba(0, 0, 0, .5);margin-left:15px;
 min-height:200px;position:absolute}

.content {padding:10px 20px 10px 30px ;}

jsFiddle：http://jsfiddle.net/7tcWN/

Answer 1

具体解决方案

这个适用于没有Javascript的浏览器。它只是在文本的div中创建边框，因此它会自动缩放。弱点：当浏览器在编辑时突出显示该框时，它们只会突出显示垂直规则右侧的部分，这看起来很奇怪。

<html><head><style>
#box { width: 200px; border: 1px solid grey; }
.content {
    border-left: 3px solid rgba(0, 0, 0, .5);
    padding: 10px 20px 10px 12px;
    margin-left: 15px;
    min-height: 200px;
}
</style></head><body>
<div id="box">
    <div contenteditable="true" class="content">
       *content goes here*
    </div>
</div>
</body></html>

现在换另一个......

完整的jQuery解决方案

不幸的是，没有change事件适用于此类可编辑字段。我测试了其他事件，并提出了这些必需的三个：

keyup - 正常打字，
keydown - 当您按住某个键时，
mousemove - 拖放。

请注意，mousemove代替mouseup，因为当触发后者时，文字尚未粘贴。在这种情况下你可能会使用setTimeout，但为了简单起见，我选择mousemove。这是代码（当您取消注释一行时使用额外的调试日志记录）：

<html><head><script src="jquery.min.js"></script><style>
#box { width: 200px; border: 1px solid grey; }
.dblline {
    border-right: 3px solid rgba(0, 0, 0, .5);
    margin-left: 15px;
    min-height: 220px;
    position: absolute;
}
.content { 
    padding: 10px 20px 10px 30px;
    min-height: 200px;
}
</style><script>
function resize_rule(msg) {
    //if (msg) console.log(msg);
    var H = $("#box .content").outerHeight();
    var h = $("#box .dblline").height();
    if (h != H) $("#box .dblline").height(H);
}
$(document).ready(function() {
    $("#box .content").keydown(function(){resize_rule("keydown");});
    $("#box .content").keyup(function(){resize_rule("keyup");});
    $("#box .content").mousemove(function(){resize_rule("mousemove");});
});
</script></head><body>
<div id="box">
    <div class="dblline">
    </div>
    <div contenteditable="true" class="content">
           *content goes here*
    </div>
</div>
</body></html>

Answer 2

dblline是#box div的直接父级。因此，您无法将其高度设置为内容类的内容。标记有两种选择。

在内容中定义边框div并使其高度自动。
向内容类添加border-left属性。

Answer 3

请参阅：

<强> HTML

<div id="box">
    <div class="dblline">

    </div>
    <div contenteditable="true" class="content">
        asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
    </div>

</div>

<强> CSS：

#box{width:200px;border:1px solid grey;min-height:200px;padding:10px;}
.dblline{margin-left:15px;position:absolute}
.content{padding:0 10px;border-left:3px solid red; overflow-wrap: break-word;}

参考link：

使div高度自动或100％？

3 个答案: