html - Div 高度边框问题

Question

大家好!

我遇到了 div 高度/边框问题。这是我正在使用的脚本:

    .content
        {
            background-image: url(../../images/logo-04.png);
            background-position: left bottom;
            background-repeat: no-repeat;
            background-size: 30%;
            border-bottom: 0.1em solid #000000;
            border-bottom-left-radius: 1em;
            border-bottom-right-radius: 1em;
            border-top: 0.1em solid #000000;
            display: inline-block;
            width: 100%;
        }

    .content-left
        {
            float: left;
            font-size: 100%;
            text-align: justify;
            width: 74%;
        }

    .content-right
        {
            border-left: 1px solid #000000;
            float: right;
            font-size: 80%;
            height: 100%;
            text-align: right;
            width: 25%;
        }

这是我正在使用的 div 的一个片段:

<div class="container2">
    <!-- Content -->
    <div class="content">
        <div class="content-left">
        </div>
        <div class="content-right">
            <div class="sidelinks">
                <ul>
                    <li><a class="link3" href=""></a></li>
                    <li><a class="link3" href=""></a></li>
                </ul>
            </div>
            <div class="social">

<---End--!>

上面的 div 在我的代码中正确关闭(我不想让任何人厌烦额外的编码)。

出于某种原因，除非我使用像素(高度:500 像素)，否则我似乎无法让我的左边框扩展右内容 div 的长度。我通常使用百分比，但在 height: 100% 时，边框只延伸到 content-right div 中的内容。

有什么建议可以达到我想要的效果吗？

Answer 1

您没有为 .content 定义高度，所以即使使用 height:100% 它也只是父级 content 的 100%。尝试将 content 高度设置为 100% 并查看是否边界随之而来