Question

我正在编写一些浏览器游戏来改进我的webskills，但我陷入了布局问题。我的游戏页面包含标题，内容和页脚，两个间隔符之间有背景图像。 content-div应垂直拉伸，以便使用视图的整个空间。如果内容比浏览器高，则应使用滚动条进一步拉伸。重要的是高度是正确的，因为我使用渐变填充为背景，这不应该在某一点重复。我认为我可以用高度来实现这一点：自动用于大尺寸和最小高度的内容：小尺寸内容的100％。但这不起作用。我读过几个论坛帖子，但没有任何工作。请问你能帮帮我吗？我的推理错误是什么？

HTML：（br用于超大页面）

<html>
<head>
  <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
  <div class="center">
    <div class="header">
      Header
    </div>
    <div class="spacer"></div>
    <div class="main">
      Content
      <!--<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>-->
    </div>
    <div class="spacer"></div>
    <div class="footer">
      Footer
    </div>
  </div>
</body>
</html>

CSS：

html,body {
    margin:0px;
    padding:0px;
    height: auto;
    min-height: 100%;
}

body {

    background: rgb(122,188,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */

}

.center {
    height: auto;
    min-height: 100%;

    width:1024px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;

    box-shadow: 0px 0px 20px 0px #000;

    background: rgb(181,189,200); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(117,117,117,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(117,117,117,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#757575',GradientType=0 ); /* IE6-9 */

}

.spacer{
    min-height:16px;
    background-image: url(Absperrband.png);
    background-repeat: repeat;
    -webkit-box-shadow: 0px 0px 5px 0px #000;
            box-shadow: 0px 0px 5px 0px #000;
}

.header {
    padding : 8px;
    height:70px;
}

.main{
    min-height: 100%;
    padding : 12px;
}

.footer{
    padding : 12px;
}

Answer 1

听起来你正在寻找一个“粘性页脚”效应。

http://www.cssstickyfooter.com/

Answer 2

html，正文应该是height:100%而你的主要div（.center）应该有min-height:100%; height:auto

DEMO

Answer 3

将display:inline-block;添加到body和.center 并看到结果

Answer 4

将display:inline-block;text-align:center;添加到body 和display:inline-block;text-align:left;

的.center

希望它可以解决我的问题

动态内容高度与最小高度

4 个答案: