Question

我已经设法通过使用以下代码将两个div彼此相邻放置，但是我的左边div不允许高度：100％并且似乎默认为auto，如何将高度设置为100％我当前的设置？

的CSS：

 .left_div
{
    width:30%;
    height:100%;
    padding:10px;
    text-align:center;
    float:left;
    overflow:hidden;


}

.right_div
{
    word-wrap:break-word;
    float:left;
    width:65%;
    margin-left:15px;
    overflow:hidden;
}

HTML：

    <div class='panel-body thread-body'>
        <div class='panel panel-default original-post-panel'>
<!-- dynamically generated content -->

            <div class='panel-body'>
                <div class='left_div'>
        <!-- dynamically generated content -->

                </div>

                <div class='right_div'>
                <!-- dynamically generated content -->
                </div>

                <div style="clear:both">
                    &#160;
                </div>
            </div>
        </div>

Answer 1

浮动div的高度不会影响父母。
因此，父div的高度为0.
因此，如果高度设置为100％，左边div的高度也将为0.
因此，左边div的内容会溢出，只有因为这种溢出才能看到。

对于您的问题，最简单的解决方案是，如果您在所有这些问题之后使用clear: both放置一个空div：

<div class="left_div">...</div>
<div class="right_div">...</div>
<div style="clear: both">&#160;</div>

实际上，它会产生类似的效果，就好像你会开始一个空的“新行”（尽管这里有没有文本行渲染）。

浮动元素不能设置高度100％

1 个答案: