Question

我在<div>中有3列。大多数列的<div>不会扩展到最大高度。我希望它是默认浏览器视图的最大高度，当我减少浏览器窗口（移动版本）时。

以下是右栏的代码和css：

HTML：

<div class="col-xs-3">
<div class="column-right">

    <span class="filter-image-right">
        <img src="/img/clock_library-right.png" />
        <img src="/img/heart_library-right.png" />
        <img src="/img/handshake_library-right.png" />
        <img src="/img/lamp_library-right.png" />
    </span>

    <div>
    <h6 class="right-column-heading"><img src="/img/minus.png"/> Cleaning</h6>

    </div>
        <p>
        The concept of cleaning makes little sense to young children.  For preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specificity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

    <h6 class="right-column-heading">Make Bed</h6>

        <p>
        For a younger child; Focus on smoothing out sheets and blankets for a clear
        playing/sitting surface.
        </p>

    <h6 class="right-column-heading">test</h6>

        <p>
        The concept of cleaning makes little sense to young children.  For preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specificity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

    <h6 class="right-column-heading">test2</h6>

        <p>
        The concept of cleaning makes little sense to young children.  For preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specificity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

</div>

的CSS：

.column-right { 

background-color: #d0d0d0; 
overflow-y: scroll;
padding:10px;
float: right;
margin-right:-17px;
max-height:570px;
}

这是包含所有三列的主div的css：

#content-content-library {
background: white;  
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
position: relative;
overflow: hidden;
}

我是html和css的新手，所以任何帮助都表示赞赏。谢谢。

编辑：

我修改了右栏的css，现在是左列。

.column-right { 
background-color: #d0d0d0; 
overflow-y: scroll;
padding:10px;
float: right;
margin-right:-17px;
height: 100vh;
}

.column-left { 
height: 100vh;
}

左列的html：

<div class="col-xs-3">
    <div class="column-left">

            <div class="row">

                    <div class="left-navigation-home">
                        <img src="/img/home_library.png" />
                        <span>Home</span>

                        <span class="test">1</span>
                        <img src="/img/side_arrow.png" height="15" width="15" />
                    </div>
            </div>
    </div>          
</div>

Answer 1

删除右栏类中的max-height声明并设置height: 100vh;。

这将为您的列定义高度，并使它们显示相同的高度。

Answer 2

只需添加这段代码并在需要均衡的列上安装类'equal_div'。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.equal_div').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.equal_div').height(highestBox);

});
</script>

如何使div成为观看高度

2 个答案: