Css 引导3列100%高度减去标题_Css_Html_Twitter Bootstrap 3

Css 引导3列100%高度减去标题

css html twitter-bootstrap-3

Css 引导3列100%高度减去标题,css,html,twitter-bootstrap-3,Css,Html,Twitter Bootstrap 3,我正试图为我的问题找到一个css解决方案。我想有一个标题和下面的三列，标题有一个固定的高度，下面的三列填充其余的空间 --------------------------------------------- | Header | |---------------------------------------------| |Col 1 | Col 2 | Col 3 |

我正试图为我的问题找到一个css解决方案。我想有一个标题和下面的三列，标题有一个固定的高度，下面的三列填充其余的空间

 ---------------------------------------------
| Header                                      |
|---------------------------------------------|
|Col 1    | Col 2                   | Col 3   |
|         |                         |         |
|         |                         |         |
|         |                         |         |
|         |                         |         |
| 100% height minus header for all 3 columns  |
 ---------------------------------------------

下面是问题的一个简单例子

我知道以前有人问过这个问题，但我不能让这些答案对我有用。我尝试过所有这些类似的问题，但都没有成功：

还有一些其他的

有什么建议吗？

Bootstrap很好，可以得到如图所示的类似结果。您可以在新的DIV中移动标题和新闻帖子，如下所示

<body>
    <div class="container">
        <div class="row header">
            <div class="col-xs-3" style="height: 100px; background: black;">

            </div>

            <div class="col-xs-9 header-line" style="height: 100px; background: black;">
                <ul>
                    <li><a href=""><i class="fa fa-home fa-2x"></i></a>
                    </li>
                    <li><a href=""><i class="fa fa-envelope fa-2x"></i></a>
                    </li>
                    <li><a href=""><i class="fa fa-print fa-2x"></i></a>
                    </li>
                    <li><a href=""><i class="fa fa-facebook-square fa-2x"></i></a>
                    </li>
                    <li><a href=""><i class="fa fa-search fa-2x"></i></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="col-xs-3 main-menu">
                <h4>Subheading</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

                <h4>Subheading</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Subheading</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>

            <div class="col-xs-6 main-content">
                <h1>Willkommen</h1>
                <p><strong>Der tcbe.ch - ICT Cluster Bern, Switzerland ist ein Zusammenschluss von Unternehmen, Ausbildungsinstitutionen, Verb&auml;nden und Beh&ouml;rden mit dem Ziel, das Thema und den Sektor Telekommunikation- und Informatik (ICT)&nbsp;unseres Wirtschaftsraumes zu st&auml;rken.</strong>
                </p>
                <div>Er koordiniert seine Aktivit&auml;ten mit der Clusterpolitik des Kantons Bern und f&ouml;rdert die nachhaltige und solide Entwicklung dieses Schwerpunktes. Mit seiner breiten Abst&uuml;tzung und den zielgerichteten Aktivit&auml;ten ist der tcbe.ch Ihr attraktiver und starker Partner in der Telekommunikation und Informatik.&nbsp;</div>


                <h1>Veranstaltungen</h1>
                <div class="headlines_content">
                    <p class="date"><b>18.06.2014</b>
                    </p>
                    <a href="index.php?section=calendar&amp;cmd=event&amp;id=817">tcbe.ch-Quartalsanlass: tcbe.ch goes Solothurn</a>
                </div>

                <div class="headlines_content">
                    <p class="date"><b>25.06.2014</b>
                    </p>
                    <a href="index.php?section=calendar&amp;cmd=event&amp;id=796">tcbe.ch-Fr&uuml;hst&uuml;cks-TRAEFF im Novotel</a>
                </div>

                <div class="headlines_content">
                    <p class="date"><b>26.06.2014</b>
                    </p>
                    <a href="index.php?section=calendar&amp;cmd=event&amp;id=821">GEVER@&Ouml;V2014 - Konferenz zur elektronischen Gesch&auml;ftsverwaltung in der &Ouml;ffentlichen Verwaltung</a>
                </div>

                <div class="headlines_content">
                    <p class="date"><b>26.06.2014</b>
                    </p>
                    <a href="index.php?section=calendar&amp;cmd=event&amp;id=822">Online-Marketing in der Praxis</a>
                </div>

                <div class="headlines_content">
                    <p class="date"><b>27.08.2014</b>
                    </p>
                    <a href="index.php?section=calendar&amp;cmd=event&amp;id=812">GetTogether bei der Jost Druck AG, H&uuml;nibach</a>
                </div>

                <div class="headlines_content">
                    <p class="more"><a href="index.php?section=calendar" title="Zur Rubrik Kalender wechseln...">[Weitere Termine]</a>
                    </p>
                </div>
            </div>

            <div class="col-xs-3 main-list">
                <h4>Subheading</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

                <h4>Subheading</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Subheading</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>
        </div>
    </div>
    <!-- /container -->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>

</html>














副标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆
副标题
莫里·利奥·里索斯，圣殿之门，爱神之门的前庭。在发酵罐中发酵
副标题
这是一种非大型的植物
威尔科曼
Der tcbe.ch-瑞士伯尔尼ICT集群位于澳大利亚教育机构Verbä的一个社区；恩登和贝厄姆；在电信和信息技术（ICT）领域，信息和通信技术（ICT）是一个非常重要的领域；rken.

埃尔·库尔迪尼耶·塞纳·阿克蒂维特和奥姆勒；伯尔尼和法乌姆的十大集体政治；这是一个很好的例子。麻省理工学院塞纳-布雷滕学院；曾和登·泽尔格瑞希特恩·阿克蒂维特和奥姆勒；十年是电信和信息领域的国际合作伙伴。
维拉斯塔顿根
2014年6月18日

2014年6月25日

2014年6月26日

2014年6月26日

2014年8月27日



副标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆
副标题
莫里·利奥·里索斯，圣殿之门，爱神之门的前庭。在发酵罐中发酵
副标题
这是一种非大型的植物

这是一把小提琴：

使用Jquery“同高”或“等高”插件解决此问题。在这里，您添加了一个列，因此这三列仍然没有达到全高。您可以使用$（'.main menu'）.css（'height'，screen.height）；对于div，使用jQuery时列高度等于屏幕高度。我希望这就是你要找的。干杯是的，这是我的出路，如果我不能让它在没有javascript的情况下工作。我先是这样做的，但如果你想让网站响应，你的javascript会不断增长，我想尽量跳过它。啊，js的第二个问题是它没有考虑到标题。因此，无论内容是否合适，我都会有滚动条。所以，不，不