Question

我目前正在编写脚本，在某些页面中没有足够的内容。在这种情况下，我希望页面覆盖100％的浏览器并将页脚放在底部。我尝试了很多代码，似乎没有什么工作我最后得到了这样的代码：

<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
    <div id=content>
        <div id=tophea>
           TOP Content
        </div>
        <div id=msgs>
       MSG Content
        </div>
    </div>
    <div id="footer">
    Footer
    </div>
    </div>
</div>

和css是这样的：

#container{
  height:100%
}
#nav{
  height:55px;
}
#core{
  height:100%
}
#content{
  height:100%;
  background:red;
}

这是我的jsfiddle：https://jsfiddle.net/k8k7o36b/

任何帮助都将不胜感激。如果你添加一些小解释，我会非常感激，所以我能理解我做错了什么。感谢

Answer 1

#container{
  height:100%
}
#nav{
  height:55px;
}
#core{
  height:100%
}
#content{
  height:100%;
  background:red;
}
#footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow:hidden;
}

<div class="container">
    <div id=nav>
    NAV
    </div>
    <div id=core>
        <div id=content>
            <div id=tophea>
               TOP Content
            </div>
            <div id=msgs>
           MSG Content
            </div>
        </div>
        <footer id="footer">
        Footer
        </footer>
      </div>
</div>

这应该这样做。我将div更改为footer，并为#footer ID添加了一些样式，以便它具有position: absolute;和bottom: 0;。您可以查看什么位置：绝对here。

编辑：显然，您可以根据需要调整页脚的高度，我只需将其设置为100px，背景颜色为橙色，以便我们可以更好地查看。

Answer 2

您可以尝试Py_Initialize(); wchar_t const *dummy_args[] = {L"Python", NULL}; // const is needed because literals must not be modified wchar_t const **argv = dummy_args; int argc = sizeof(dummy_args)/sizeof(dummy_args[0])-1; PySys_SetArgv(argc, const_cast<wchar_t **>(argv)); // const_cast allowed, because PySys_SetArgv doesn't change argv：

请注意，您需要在 html和body 上使用flexbox，并在 nav和core 的同一级别使用100%元素

＆＃13;

footer

＆＃13;

html,body {
  margin: 0;
  height: 100%;
}
.container {
  background: orange;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
#nav {
  flex: 0 0 auto;
  height: 55px;
}
#core {
  flex: 1 0 auto;
  background: red;
}

＆＃13;

Answer 3

您可以使用flex布局并将主要内容区域设置为1，这样它将占用导航和页脚之间的所有可用空间，并且会在页面底部将页脚推到页面底部内容不够。

＆＃13;

pattern="0[1-9]|1[0-2]"

＆＃13;

flex-grow: 1

＆＃13;

Answer 4

你可以在css中使用计算来帮助解决这个问题。

#core {
    height: (100vh - 55px)
}

100vh是视口的100％，而55px是页脚的高度。如果你给它们一个高度，也可以在计算中添加任何其他元素，例如

#header{
    height: 45px
}
#core {
    height: (100vh - 100px)
}

Answer 5

html,body,#container{
  height:100%
}
#nav{
  height:55px;
}
#core{
  height:100%
}
#content{
  height:100%;
  background:red;
}
#footer{
  position:absolute;bottom:0;
  right:0;left:0
}

<div class="container">
    <div id=nav>
    NAV
    </div>
    <div id=core>
        <div id=content>
            <div id=tophea>
               TOP Content
            </div>
            <div id=msgs>
           MSG Content
            </div>
        </div>
        <div id="footer">
        Footer
        </div>
        </div>
    </div>
</div>

添加这些类

html,body{
  height:100%
}

#footer{
  position:absolute;bottom:0;
  right:0;left:0
}

Answer 6

这是一个通用的flexbox解决方案。

flex-grow: 1;告诉main填补剩余空间。这样做的好处是无需在页脚上设置特定的高度。

Flexbox Support

Chrome 21 +
Firefox 28 +
IE 10 +
边缘
Safari 6.1 +

*有些可能支持2012语法或需要-webkit- 等前缀

＆＃13;

html {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
header {
  background-color: indianred;
}
main {
  flex-grow: 1;
  background-color: skyblue;
}
footer {
  background-color: gold;
}

＆＃13;

<header>
  Header
</header>
<main>
  Content
</main>
<footer>
  Footer
</footer>

＆＃13;

页脚高度100％和css问题

6 个答案:

Flexbox Support