Question

我正在尝试构建一个使用三列的应用程序。目前，我有以下代码：

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

我的问题是，我的专栏没有占据屏幕的全高。我认为这是data-equalizer属性的目的。不幸的是，看起来我错了。我做错了什么？

Answer 1

我一直在使用vh单位来实现这个目的：


cat file.txt | cut -d':' -f1 | while read line
do ...

对于我们的特定项目，它符合我们的要求，您可以在Can I Use

检查您的项目

Answer 2

根据基础文档，你应该在父母身上使用data-equalizer，然后在所有孩子身上使用data-equalizer-watch。 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>

然后不要忘记添加$(document).foundation();

修改

我最初误解了你想要的东西。基本上你需要添加几个height: 100%;的css规则，这样父母和孩子都可以扩展到屏幕高度的100％。

这是一个更新的JSfiddle：http://jsfiddle.net/NateW/e4uqw4yq/

在Zurb Foundation使用全高柱

2 个答案: