Question

我有两个页面使用相同的CSS但似乎看起来不同。他们在这里：

128.48.204.195:3000
128.48.204.195:3000/formats

您可以看到在页脚下方，/ formats文件没有多余的空间，而另一个文件在页脚后面的底部有大约50个像素的额外空间。你知道为什么会这样吗？据我所知，他们使用相同的CSS。

这是我认为影响这个的div的css：

div#container
{
    width:70%; /* Controls the with of the page */
    margin: auto; 
  float: middle;
    text-align:center;
    /*padding: 1%;*/
    border:1px solid #333;
    background-color:#eee;
}

div#header
{
  text-align:center;
  padding:10px;
}

谢谢！

Answer 1

您在content css类上设置了最小高度。哪个适用于你的包装div。删除或更改最小高度，它将消除额外的空间。

<div id="layout1" class="yui-t6 content">

Answer 2

问题在于：

<div class="yui-t6 content" id="layout1">


       <h1><center>Welcome to the UDFR Project</center></h1>
    <p></p>
    <p>Find me in app/views/home/index.html.erb</p>
    <p>    
    </p>
    <p>
      User Id (testing MySQL call): 1

    </p>

    <p>


  </p><div id="footer">
     <hr>
     <center>Team | About Us | Purpose | How You Can Help | CDL </center>
  </div> <!-- End of footer --> 

</div>

/ formats页面没有布局div，因此它没有应用所有相同的css规则。影响底部的css规则具体在.content {min-height：20em;} 改变它以降低身高。

作为旁注，我认为你想要的更像是这样：

    <h1><center>Welcome to the UDFR Project</center></h1>
<div class="yui-t6 content" id="layout1">
    <p></p>
    <p>Find me in app/views/home/index.html.erb</p>
    <p>    
    </p>
    <p>
      User Id (testing MySQL call): 1

    </p>

    <p>


  </p> 
</div>
<div id="footer">
     <hr>
     <center>Team | About Us | Purpose | How You Can Help | CDL </center>
  </div> <!-- End of footer --> 

</div>

在页眉和页脚之间移动内容，而不是包含它们。

页面底部与页面不匹配

2 个答案: