1

我想要一个div类“面板”和白色背景延伸到可视区域的底部并且不显示滚动条（仅当内容超过视口时才显示滚动条）

这是我正在处理的示例。

http://jsfiddle.net/VUP72/

我试过了 ：

.panel{
  height: 100%;
}

但是滚动会出现，因为它是 100% + 标题。如何在没有滚动条的情况下填充页面？

4

6 回答 6

0

尝试这个：

 background-repeat: repeat-y;

希望这可以帮助！

于 2013-01-17T11:50:11.823 回答
0

您可以将标题放在主容器中，如下所示：

<div id="main">
  <header>Header</header>
  <div class="sub-header">SUB-header</div>
  <div class="container">
    <div class="panel-top">TOP PANEL</div>
    <div class="panel">PANEL 
      <div>My contente should appear here ...</div>
    </div>
  </div>
</div>
<footer><div id="footer">Footer</div></footer>

然后它将随着整个页面滚动。如果你不想这样，你可以给标题 position:static 和 top:0px 和 left:0px。

于 2013-01-17T11:50:49.607 回答
0

尝试将此添加到您的CSS：

body {
    overflow: hidden;
}

这样你就永远不会得到滚动条。另一种方法是使用 calc：

.panel {
    min-height: calc(100% - 20px);
}

将页眉高度更改 20px。我不确定这是否适用于所有浏览器，但您必须尝试一下。

于 2013-01-17T11:40:38.453 回答
0

我不确定你是否可以在简单的 css 中做到这一点，因为每个显示器都有不同的高度，所以我认为你应该使用 javascript 或 jquery 之类的东西来获取显示器的高度，以及当它超出该范围时向你显示滚动。我不确定这是否是你要找的

于 2013-01-17T11:42:02.567 回答
0

Height从身体中取出。我希望这对你有帮助。

于 2013-01-17T12:15:17.883 回答
0

如果不看 Flexbox，您必须在如何设计元素方面更有创意，以产生特定元素比实际更大的错觉。不要忘记您的body元素是一个容器，并且可以独立于html元素进行样式设置！

http://jsfiddle.net/VUP72/4/

html, body {
  min-height: 100%;
  background: black;
}

html {
  min-width: 400px;
}

body {
  width: 300px;
  margin: auto;
  position: relative;
}

header, .sub-header{
  height: 30px;
}

.panel-top, .panel{
  width: 200px;
  margin: auto;
}

footer{
  position: fixed;
  bottom: 0;
  width: inherit;
}

/*COLORS to indentify*/
header{ background: red; }
#footer{ background: blue;}
body{ background: white; }
.sub-header { background: grey }
.container{background: yellow;}
.panel-top{background: #f0f0f0;}
.panel{background: white;}
于 2013-01-17T13:37:55.297 回答