Question

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

这是我正在研究的例子。

我试过了：

.panel{
  height: 100%;
}

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

Answer 1

尝试将此添加到您的css：

body {
    overflow: hidden;
}

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

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

在标题的高度更改20px。我不确定这是否适用于所有浏览器，但你必须尝试。

Answer 2

我不确定你是否可以在简单的css中执行此操作，因为每个显示器都有不同的高度，所以我认为你应该使用像javascript或jquery这样的东西来获得显示器的高度，当它超出该范围时显示给你滚动。我不确定这是否是您正在寻找的

Answer 3

试试这个：

 background-repeat: repeat-y;

希望这有帮助！

Answer 4

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

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

然后它将滚动整个页面。如果你不想那样，你可以给标题位置：static with top：0px and left：0px。

Answer 5

从正文中移除Height。我希望这对你有所帮助。

Answer 6

如果不考虑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;}

使用div背景填充页面而不使用滚动条

6 个答案: