Question

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

我正在与页脚（div）挣扎，在桌面上，class="small-12 coulms"的div位于底部

但是当我试图减少移动设备的浏览器屏幕尺寸时，底部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>

Answer 1

我个人会将页脚作为自己的class =“row”。我相信这个类应用了一个clearfix，因此它可以自行保留。

Answer 2

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

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

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

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

基础CSS框架 - 响应网格

2 个答案: