Question

我是Grails的新手并使用list.gsp页面显示用户列表，但是当列表中的项目较少时说1或2，则在两个记录之后出现页脚而不是在浏览器底部取出它的修复位置。

我尝试过在main.css中更新我的css，并将css应用于'g：layoutBody'标签。但结果是一样的。

任何人都可以请帮助我如何在底部设置页脚。我在'g：layoutBody'标签中使用以下css -

<g:layoutBody style="position: fixed;left: 0px;bottom: 30px;width: 100%;"/>

我的main.css有这段代码 -

body {
    background: #ffffff;
    color: #333333;
    margin: 0 auto;
    max-width: inherit;
    margin-left:20px;
    margin-right:20px;
    overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
    -moz-box-shadow: 0 0 0.3em #255b17;
    -webkit-box-shadow: 0 0 0.3em #255b17;
    box-shadow: 0 0 0.3em #255b17;
}

和页脚css是

.footer {
    background: #abbf78;
    color: #000;
    clear: both;
    font-size: 0.8em;
    margin-top: 1.5em;
    padding: 1em;
    min-height: 1em;
 }

.footer a {
    color: #255b17;
 }

Answer 1

这是纯粹的HTML / CSS问题，因此同样适用于GSP和标准HTML页面。

你所追求的是一个“粘性页脚”，它可以通过将内容包装在将页脚推到页面底部的容器中来实现。

以下是一个工作示例（使用问题内容进行了更新）：http://jsfiddle.net/spikeheap/ujttV/2/

关键点是用一些扩展到你内容之外的东西构建HTML：

<body>
   <div class="wrapper">
       <div id="content">
           ...
       </div>
   </div>
   <div class="footer">
       This is a footer message
   </div>
</body>

然后您可以使用CSS将包装器的高度设置为100％：

html, body{
    height: 100%;
}
.wrapper {
    min-height: 100%;
}

最后，您的页脚可以很聪明，并使用负边距顶部从页面底部下方向上拉：

.footer {
    position: relative;
    margin-top: -200px;
    height: 200px;
    background-color: #cecece;
}

你会很快注意到，如果你使窗口非常小，或者增加你的内容，那么它就会被截断，所以你的内容块的填充应该等于页脚高度（以确保它在填充时将其推下来空间：

#content {
    padding-bottom: 200px;
}

更新

layoutBody标记用于渲染gsp的主体，因此你可以使用layouts / mytemplate.gsp：

<!DOCTYPE html>
<html>
<head>
   <g:layoutHead />
</head>
<body>
    <div class="wrapper">
        <div id="content">
            <g:layoutBody />
        </div>
    </div>
    <div class="footer">
        This is a footer message
    </div>
</body>

然后在（例如）index.gsp：

中

<head>
  <meta name="layout" content="mytemplate">
</head>
<body>
     Welcome to my website. Check out the amazing footer
</body>

当内容不多时添加粘贴到页面底部的页脚

1 个答案:

更新