调整制表符以使其与Materialize.css中最高的制表符具有相同的高度

时间:2017-08-20 23:41:25

标签: css tabs materialize

在Materialise CSS中使用制表符时,每个制表符都与其内容一样高。

信息标签 Info tab

反馈标签 Feedback tab

如何使所有标签与最高标签一样高?

我知道我可以设置div的最小高度,但我真正感兴趣的是知道我是否可以使用物化帮助器或物化类来实现。

HTML:

<div class="container">
    <div class="row card hoverable">
        <div class="col s12">
            <ul class="tabs">
                <li class="tab col s3"><a class="active" href="#test1">Info</a></li>
                <li class="tab col s3"><a href="#test2">Feedback</a></li>
                <li class="tab col s3 disabled"><a href="#test3">QA</a></li>
            </ul>
        </div>
        <div id="test1" class="col s12">
            <div class="row">
                <div class="col">
                    <h5>Location</h5>
                    <p>Lorem ipsum dolor sit amet</p>
                    <p>consectetur adipiscing elit</p>
                    <p>Cras vestibulum</p>
                </div>
                <div class="col push-s1">
                    <h5>Available Timings</h5>
                    <p>Mon: 8AM - 9PM</p>
                    <p>Tue: 8AM - 9PM</p>
                    <p>Thu: 8AM - 9PM</p>
                    <p>Sat: 10AM - 2PM</p>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <strong>ID:</strong> ABBS1243xA
                </div>
            </div>
        </div>
        <div id="test2" class="col s12">
            <ul>
                <li>Sorry, no feedback available at this time.</li>
            </ul>
        </div>
        <div id="test3" class="col s12">Test 3</div>
    </div>
</div>

我有一个codepen here

1 个答案:

答案 0 :(得分:1)

在您的java脚本中添加它

$(".tabs-content").css('height','1000px');

“tabs-content”由materialize java脚本生成。在这里,我使用我的java脚本来解决该类。 1000px可根据您的需要而变化。

希望这有帮助。

相关问题