CODEWITHSUNDEEP
csszurb-foundation
user70192
user70192

Reputation: 14204

Full Screen Layout with Foundation for Sites

I am trying to create a full screen layout using Zurb's Foundation for Sites. I need to use the full width of the screen. I also want to have two columns for navigation on the left side of the screen. The layout will look something like this:

+--------+--------+---------------------+ 
|        |        |                     | 
|        |        |                     | 
|        |        |                     | 
|        |        |                     | 
|        |        |                     | 
|        |        |                     | 
|        |        |                     | 
|        |        |                     | 
+--------+--------+---------------------+

The left-two-columns will be a fixed size. However, the far most column needs to take up the remaining space. In an attempt to build this, I've currently written the following code:

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="/resources/root/images/favicon.png">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" />
    <style type="text/javascript">
    .   .app {
            height: 100%;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .app-col {
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="row">
            <div class="app-col large-2 columns" style="background-color:blue;">
                <div class="title-2">Here</div>
                <nav>
                  <div><a href="/location-1">Nav 1</a></div>
                  <div><a href="/location-2">Nav 2</a></div>
                </nav>
            </div>
            <div class="app-col large-2 columns" style="background-color:red;">
                <nav>
                  <div><a href="/location-a">Sub Nav 1</a></div>
                  <div><a href="/location-b">Sub Nav 2</a></div>
                </nav>
            </div>
            <div class="app-col large-8 columns">
                content
            </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>
</body>
</html>

Unfortunately, when I run it 1) The layout seems to only take up ~70% of the screen and 2) It is not filling the entire height of the screen.

What am I doing wrong?

Upvotes: 2

Views: 5485

Answers (2)

Pac
Pac

Reputation: 11

This is old but just incase anyone else is looking for this answser. Foundation 6 now has a class you can use to achieve 100% width. Just use the class expanded. 

<div class="row expanded">
 content goes here
</div>

Upvotes: 1

Leandro Carracedo
Leandro Carracedo

Reputation: 7345

For the first question, that's because Zurb's Foundation class row being applied, you could include a custom class to override and have full width, like:

.fullwidth {
   width: 100%;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

So the second question could be answered using a new feature called equalizer

Check this fiddle

Perhaps another solution could be using some javascript, like here

HTML:

<div class="app">
    <div class="row fullwidth" data-equalizer>
        <div class="app-col large-2 columns" style="background-color:blue;" data-equalizer-watch>
            <div class="title-2">Here</div>
            <nav>
              <div><a href="/location-1">Nav 1</a></div>
              <div><a href="/location-2">Nav 2</a></div>
            </nav>
        </div>
        <div class="app-col large-2 columns" style="background-color:red;" data-equalizer-watch>
            <nav>
              <div><a href="/location-a">Sub Nav 1</a></div>
              <div><a href="/location-b">Sub Nav 2</a></div>
            </nav>
        </div>
        <div class="app-col large-8 columns" style="background-color:green;">
            content
        </div>
    </div>            
</div>

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

Upvotes: 3

Related Questions