0

我已经开始使用 Foundation4 CSS 框架来设计和开发一个响应式页面。

我正在为页脚（div）而苦苦挣扎，在桌面上它的 divclass="small-12 coulms"位于底部

但是，当我尝试减小移动设备的浏览器屏幕尺寸时，底部 div 会出现在其他 div 之间，而不是占据页脚位置。

这是我的代码，任何帮助我如何使用 Foundation 4 CSS 框架方法来限制页脚将对我使用框架有很大帮助。 

  <div id="header" class="row">

    <div id="logo" class="large-3 columns">

      <img src="img/logo-header.gif" />

    </div>

    <div id="slogan" class="large-3 columns">

      <span class="slogan">AAAAAAAAAAAAAAAAAAA

       <sup style="font-size: 13px;font-family: Arial;">*</sup>,    

    BBBBBBBBBBBBBBBBB
      </span>
    </div>

    <div id="search" class="large-5 columns">

      <div class="large-12 columns  hide-for-small">

        <ul class="topLinks">

         <li><a href="financial-planning-advisors-consultants.aspx">Contact us</a></li>
         <li><a href="Career.aspx">Careers</a></li>

         <li><a href="ResourceCenter.aspx">Research &amp; Tools</a></li>

         <li class="noBorder"><a href="AboutUs-AboutAmeriprise.aspx">About </a></li>
        </ul>

      </div>

      <div class="large-12 columns">

            <div class="small-8 columns">

        <input type="text" />

        </div>

        <div class="small-4 columns">

        <a href="#" class="small button">Search</a>

        </div>

      </div>

    </div>

   </div>

  </div>


<div class="small-12 large-12 columns">

  <div class="row">

    <nav class="top-bar">

       <ul class="title-area">

<!-- Title Area -->
          <li class="name"><h1><a href="#"> Home </a></h1></li>

<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
       </ul>

       <section class="top-bar-section">
<!-- Left Nav Section -->
        <ul class="left">
          <li class="divider"></li>
          <li class="active has-dropdown"><a href="#">Experience the   difference</a>
            <ul class="dropdown">
              <li ><a href="#">Why We</a></li>
              <li><a href="#">Getting Started</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li class="divider"></li>
          <li class="has-dropdown"><a href="#">How Can We Help You</a>
            <ul class="dropdown">
              <li ><a href="#">Our Unique Aprroach</a></li>
              <li><a href="#">Our Offerings</a></li>
              <li><a href="#">Financial Products</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li class="divider"></li>
          <li><a href="#">Have An Advisor Contact You</a></li>
          <li class="divider"></li>
        </ul>

<!-- Right Nav Section -->
        <ul class="right">
          <li><a href="#">My Account</a>
        </ul>
      </section>
    </nav>
   </div>
  </div>


  <div  class="small-12 large-12 columns">

    <div id="mainSection" class="row" style="background:blue">

       <div id="left" class="large-3 columns" style="background:#8DBC8F" >

         <div id="leftFirst" class="large-12 columns" style="background:#F08080"><h3>News and Features </h3></div>

         <div id="leftSecond" class="large-12 columns" style="background:#E6E6FA"><h3> About </h3></div>

       </div>

       <div id="right" class="large-9 columns" style="background:#008B8B"> 

         <div id="rightContainer" class="row">

           <div id="leftFirst" class="large-12 columns" style="background:#DAA520"> </div>

           <div id="leftSecond" class="large-12 columns" style="background:#7B68EE"> 

            <div id="welcome" class="row">

              <div id="image" class="large-12 columns"><h3>Welcome TO </h3> </div>

               <div id="about" class="large-12 columns"> 

                 <div id="welcome" class="row">

                   <div id="about1" class="large-4 columns"><h6>EEEEEEEEEEEEE</h6> </div>

                   <div id="about2" class="large-4 columns"> <h6>Our Unique Aprroach</h6> </div>

                   <div id="about3" class="large-4 columns"><h6>Our Offerings</h6>  </div>


                   </div>
                 </div>

               </div>

            </div>

           </div>
          </div>

       </div>
       <div id="footer" class="large-12 columns">
       nithkincdbjcbdsj
       </div>

    </div>

  </div>    

    </div>

4

2 回答 2

1

我个人会将页脚作为自己的 class="row"。我相信这个类应用了一个 clearfix，所以它保持独立。

于 2013-07-12T13:41:38.973 回答
0

不确定您是否已解决此问题。我注意到在您上面的示例代码中，有许多嵌套列不包含在具有“行”类的元素中。

<div class="row">
    <div class="large-12 columns">
        <div class="row">
            <div class="large-eight columns">
                <div class="row">
                    <div class="large-12 columns"></div>
                </div>
            </div>
            <div class="large-4 columns"></div>
        </div>
    </div>
</div>

据我了解，这是列正常工作所必需的。

如果我误解了文档，请有人纠正我。

于 2013-08-18T00:25:54.267 回答