1

I'm trying to find a css solution for my problem. I want to have a header and three columns below where the header has a fixed height and the three columns below fills the rest of the space. 

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

Here is a js-fiddle of the problem.

I know this has been asked before but I can't get those answers working for me. I have tried all these similar problems with no luck:

Bootstrap 3 - 100% height of custom div inside column

Setting 100% height to columns in Twitter Bootstrap

and some other ones

Any suggestions?

Community
  • 1
  • 1
just_user
  • 11,769
  • 19
  • 90
  • 135

1 Answers1

0

Bootstrap is fine, to get the similar result like in figure. You can move your headings and news post in new DIV like below

<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>

Here is a fiddle:

http://jsfiddle.net/sagarawasthi/Kv572/2/

Sagar Awasthi
  • 538
  • 5
  • 10
  • Here you've added a column bellow, so the three columns still doesn't go full height. – just_user Jun 11 '14 at 13:14
  • You can use $('.main-menu').css('height', screen.height); for the div column height equals to screen height using jQuery. I hope this is what you are looking for. cheers! – Sagar Awasthi Jun 11 '14 at 13:37
  • Yes, this is my way out if I can't get it to work without javascript. I did it like this first, but if you want the site to be responsive your javascript keeps growing and I want to skip that as much as possible. – just_user Jun 11 '14 at 13:39
  • Aah, a second problem with that js is that it doesn't take account to the header. So I would always have scroll no matter if the content fits or not. So, no no! :) – just_user Jun 11 '14 at 13:41