Question

所以，我的网站上有一个侧边栏。它的高度可以动态变化。我希望右边有1px宽的边框，但我不希望它像容器一样高;它应该只有70％的高度。此外，它应垂直居中于容器的中间。

我该怎么做？我所看到的大多数方法都需要定义边框的高度，但我无法做到这一点。这只能用CSS吗？如果没有，我如何使用JavaScript来执行此操作？谢谢！

Answer 1

我有一个想法，它由FF6和IE9 + Chrome和Opera 11支持：

<强> HTML

<div id="container">
    <div class="border_r"></div>
    contents
</div>

<强> CSS

#container {
    height: 356px;
    background: #eee;
    position: relative;
}
.border_r {
    border-right: 2px solid red;
    height: 70%;
    position: absolute;
    right: 0px;
    top: 15%;
}

jsFiddle ...我不知道它是否可以在其他任何地方使用

Answer 2

您可以使用CSS Pseudo-elements创建“伪边框”。虽然the browser support (particularly in the IE department) is not exactly stellar，但它的语义更多（并且建议，如果你可以删除＆lt; IE7支持）的方式。

相反，如果你不介意额外的非语义元素，你可以简单地做using an extra <div> inside of your sidebar：

HTML

<div id="example-sidebar">
    <div id="example-border"></div>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>

CSS

#example-sidebar{
    background-color: yellow;
    color: black;
    height: 400px;
    margin-left: 1px;   /* Required for 70% height border */
    position: relative; /* Required for 70% height border */
    width: 150px;
}
#example-border{
    background-color: red;
    height: 70%;
    position: absolute;
        left: -1px;
        top: 15%;
    width: 1px;
}

Answer 3

试试这个：

.box:before
{
    width: 1px;
    height: 70%;
    position: relative;
    float: right;
    background-color: black;
    display: block;
    content: '';
}

http://jsfiddle.net/uxNar/

如何创建一个只有实际尺寸的70％的右边框？

3 个答案:

HTML

CSS