CODEWITHSUNDEEP
csszurb-foundation
xam developer
xam developer

Reputation: 1983

Using Full-Height Columns in Zurb Foundation

I have an app that I am trying to build that uses three-columns. Currently, I have the following code:

<html>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">

    <style type="text/css">
        .app {
            height: 100%;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .app-col {
            height: 100%;
        }

        .fullwidth {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            max-width: initial;
        }
    </style>
    <meta class="foundation-data-attribute-namespace">
    <meta class="foundation-mq-xxlarge">
    <meta class="foundation-mq-xlarge-only">
    <meta class="foundation-mq-xlarge">
    <meta class="foundation-mq-large-only">
    <meta class="foundation-mq-large">
    <meta class="foundation-mq-medium-only">
    <meta class="foundation-mq-medium">
    <meta class="foundation-mq-small-only">
    <meta class="foundation-mq-small">
  </head>
  <body>
    <div class="app">
        <div class="row fullwidth" data-equalizer="">
            <div style="width:33%; height:100%;">
                <div class="row" data-equalizer="">
                    <div class="large-6 columns" style="background-color:#467EAF;">
                        <h3>Hello</h3>
                        <nav>
                            <ul style="list-style: none;">
                                <li><a href="/what/we-do" style="color:white;">
                                    <h4><i class="icon-google-plus"></i>Welcome</h4></a>
                                </li>
                                <li><a href="/about" style="color:white;">
                                    <h4><i class="icon-google-plus"></i>About Us</h4></a>
                                </li>
                            </ul>
                        </nav>

                        <ul class="inline-list text-center pull-bottom">
                            <li><a href="#" title="Google Plus" rel="publisher" target="_blank">Google Plus</a></li>
                            <li><a href="#" rel="publisher" title="LinkedIn" target="_blank">LinkedIn</a></li>
                            <li><a href="#" title="Contact Us">Email Us</a></li>
                         </ul>
                    </div>

                    <div class="large-6 columns" style="background-color:#829EBF;">
                        <h3>ABOUT</h3>
                        <nav>
                            <ul style="list-style: none;">
                                <li><a href="/what/we-do" style="color:white;">Overview</a></li>
                            </ul>
                        </nav>
                    </div>
                  </div>
               </div>

               <div style="width:67%;">
                   Content

                   <ul class="inline-list text-center pull-bottom">
                       <li>©2015 Goes Here</li>
                   </ul>
               </div>
           </div>
       </div>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>

    <script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
</body></html>

My problem is, my columns are not taking up the full-height of the screen. I thought that was the purpose of the data-equalizer attribute. Unfortunately, it looks like I was wrong. What am I doing wrong?

Upvotes: 0

Views: 4821

Answers (2)

mtpultz
mtpultz

Reputation: 18248

I've been using vh units to get this to work:

div.full-height {
   min-height:100vh;
}

For our particular project it meets our requirements, which you can check for your project at Can I Use

Upvotes: 4

NateW
NateW

Reputation: 2121

According to the foundation docs you're supposed to use data-equalizer on the parent and then data-equalizer-watch on all the children. http://foundation.zurb.com/docs/components/equalizer.html

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

And then don't forget to add $(document).foundation();

Edit

I misunderstood what you wanted initially. Basically you need to add several css rules of height: 100%; so that both the parents and children can expand to 100% of the screen height.

Here is an updated JSfiddle: http://jsfiddle.net/NateW/e4uqw4yq/

Upvotes: 1

Related Questions