Question

我正在使用materialize css设计页面。我有一行有两个列，其中包含＆＃34;左面板＆＃34; 和＆＃34;右面板＆＃34; 。左列将显示一个用户列表，其中将显示来自输入字段的右列消息。

我的问题是，当消息数量更多时，左右列的高度不会一起增加。请帮帮我。

HTML：

<div id="main-row" class="row">
        <div id="left-panel" class="col s12 m2 hide-on-small-only grey lighten-3">
            <h5 class="center-align">Chatters</h5>
            <div class="divider"></div>
        </div>
        <div id="right-panel" class="col s12 m10">
            <div class="section">
                <h4>Welcome to ChatSpace</h4>
                <ul id="messages"></ul>
            </div>
            <div class="divider"></div>

            <div class="section">
                <form id="message-form">
                    <div class="input-field col s12 m12 l10">
                        <input id="message" name="message" type="text" autofocus autocomplete="off"/>
                        <label for="input_text">Type your message...</label>
                    </div>
                    <div class="input-field col s12 m12 l2">
                        <button class="green waves-effect waves-light btn">
                            <i class="material-icons right">message</i>Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

CSS：

body {
    overflow: auto;
    margin: 0 auto;
    padding: 0 auto;
}

#left-panel {
    min-height: 100vh !important;
}

Answer 1

只需在主行上使用display flex并快乐编码

#main-row { display: flex; }

Materialise css中相同高度的列

1 个答案: