如何使用css使主要内容div填充屏幕的高度[重复]

【问题标题】：How to make the main content div fill height of screen with css [duplicate]如何使用css使主要内容div填充屏幕的高度[重复]
【发布时间】：2013-09-10 23:46:20
【问题描述】：

所以我有一个带有页眉、主体和页脚的网页。 我希望主体填充 100% 的页面（在页脚和页眉之间填充 100%） 我的页脚是绝对位置，底部：0。每次我尝试将主体设置为 100% 高度或更改位置或其他内容时，它也会溢出页眉。如果使用top: 40 将 body 设置为绝对位置（因为我的标题是 40px 高），它只会向下 40px 太远，创建一个滚动条。

我创建了一个简单的 html 文件，因为我实际上无法从实际项目中发布整个页面/css。使用示例代码，即使 maincontent 主体填满了屏幕，它也会向下移动 40px 太远（我假设是标题的原因）。

html,
body {
  margin: 0;
  padding: 0;
}

header {
  height: 40px;
  width: 100%;
  background-color: blue;
}

#maincontent {
  background-color: green;
  height: 100%;
  width: 100%;
}

footer {
  height: 40px;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;
}
<html>

<head>
  <title>test</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <div id="maincontent">

  </div>

  <footer></footer>
</body>

</html>

有人知道答案吗？

【问题讨论】：

  • 一切都非常广泛...你想要 ie5.5 for mac、ie6、ie7、ie8、ie9、当前浏览器（ie10、chrome、ff、opera、safari），还是什么？跨度>
  • 请注意：避免网站主要部分（页眉、正文、页脚等）的绝对定位。在移动浏览器和旧浏览器上您会得到非常有趣的结果
  • 记住了:)

标签： javascript html css


【解决方案1】：

不需要Javascript，不需要绝对定位，也不需要固定高度。

这是一个全 CSS / 仅 CSS 的方法，不需要固定高度或绝对定位：

/* Reset */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


/* Essentials */

.container {
  display: table;
}

.content {
  display: table-row;
  height: 100%;
}

.content-body {
  display: table-cell;
}


/* Aesthetics */

.container {
  width: 100%;
  height: 100%;
}

.header,
.footer {
  padding: 10px 20px;
  background: #f7f7f7;
}

.content-body {
  padding: 20px;
  background: #e7e7e7;
}
<div class="container">
  <header class="header">
    <p>This is the header</p>
  </header>
  <section class="content">
    <div class="content-body">
      <p>This is the content.</p>
    </div>
  </section>
  <footer class="footer">
    <p>This is the footer.</p>
  </footer>
</div>

这种方法的好处是页脚和页眉可以增长以匹配它们的内容，并且正文会自动调整自己。您还可以选择使用 css 限制它们的高度。

【讨论】：

  • 内容区获取滚动条失败：jsfiddle.net/AzLQY/517
  • @JunleLi 如果你想让它滚动你可以这样做：jsfiddle.net/geprhxxv/1
  • 感谢您的回复。我想要一个具有可滚动主区域并且没有用于页眉和页脚的幻数的解决方案。我做了很多搜索并放弃。无论如何，非常感谢你！您的解决方案令人鼓舞！ :)
  • @JunleLi 这个解决方案没有神奇的数字。所以听起来这就是你要找的，还是你的意思？
  • 嗨，@Mark。这是一个不错的方法。但它不适用于 IE。 :( 感谢您的帮助！
【解决方案2】：

这些不是必须的

  • 以 % 为单位移除高度
  • 移除 jQuery

使用底部和顶部拉伸 div：

.mainbody{
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;
}

检查我的代码：http://jsfiddle.net/aslancods/mW9WF/

或在这里查看：

body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;
    
    position: absolute;
    bottom: 0;
    width:100%;
}
<div class="header" >
    &nbsp;
</div>
<div class="mainBody">
    &nbsp;
    <div class="content" >Hello world</div>
</div>
<div class="footer">
    &nbsp;
</div>

【讨论】：

  • 页眉和正文 -> 是位置：静态，mainBody 和页脚 -> 位置：绝对。正确的 ？你有没有检查并遵循我的代码，来自 jsFiddle ？
  • 我忘了我还有 height: 100%，当我把它改成 auto 时它起作用了 :)
  • 此解决方案只有在您知道页眉和页脚大小的情况下才能正常工作。如果您需要它独立于页眉和页脚的高度工作，请查看@Mark Murphy 的解决方案。
  • @sudhnk 尝试添加更多内容，然后滚动出现问题。 jsfiddle.net/sgs7yog0
  • 这个解决方案有问题。内容超出页脚并且页脚向上滚动。尝试在提供的 jsfiddle 链接中添加一堆内容。下面的解决方案效果很好。在 chrome 和 safari 上试过。
【解决方案3】：

此题与Make a div fill the height of the remaining screen space 重复，正确答案是使用flexbox 模型。

所有主流浏览器和 IE11+ 都支持 Flexbox。对于 IE 10 或更早版本，或者 Android 4.3 或更早版本，您可以使用FlexieJS shim。

请注意标记和 CSS 的简单程度。没有桌子黑客或任何东西。

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

在上面的 CSS 中，flex 属性简写了flex-grow、flex-shrink 和flex-basis 属性，以建立弹性项目的灵活性。 Mozilla 有一个good introduction to the flexible boxes model。

【讨论】：

  • 对flex 属性的支持仍然是extremely limited.。当然，将其发布为答案，但不要太嚣张，告诉（要求）其他人删除他们的答案，因为你的答案“更好”。
  • @Cerbrus：对于所有常青浏览器和 IE11+，什么是“极其有限”的？我还提到了 FlexieJS 垫片。我不在乎“我的”是否更好，正如在您可能从这里得到的问题中宣传 Pebbl 的回答所证明的那样。
  • @ArunPrasadES：因为它是这个问题的现代解决方案。
【解决方案4】：

有一个称为视口高度/视口宽度的 CSS 单元。

例子

.mainbody{height: 100vh;} 类似html,body{width: 100vw;}

或 90vh = 视口高度的 90%。

**IE9+ 和大多数现代浏览器。

【讨论】：

  • 这是一个很好的解决方案，但并非所有现代浏览器都支持 vh，例如iOS 7.1 safari 和 android chrome
  • 我发现移动浏览器上的 vh 单元存在问题。 URL 栏似乎被计算为整个 vh。因此，当您滚动并且 URL 栏崩溃时，这似乎是一个小故障，并且该站点会尝试重新计算。只是演示明智，它很弱。有人有解决方案吗？
  • 这给了元素屏幕的大小，但不保证它会真正填满屏幕——或者完全在屏幕上。
【解决方案5】：

相对值：height:100% 将使用 HTML 中的父元素作为参考，要使用高度中的相对值，您需要使 html 和 body 标签具有 100% 的高度：

HTML

<body>
    <div class='content'></div>
</body>

CSS

html, body
{
    height: 100%;
}

.content
{
    background: red;
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/u91Lav16/1/

【讨论】：

    【解决方案6】：

    这允许我的表单以最小宽度居中的内容主体不会折叠：

    html {
    overflow-y: scroll;
    height: 100%;
    margin: 0px auto;
    padding: 0;
}

body {
    height: 100%;
    margin: 0px auto;
    max-width: 960px;
    min-width: 750px;
    padding: 0;
}
div#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}

div#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

div#pageContent {
    padding-bottom: 60px;
}

div#header {
    width: 100%;
}

    我的布局页面看起来像：

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title></title>
</head>
<body>
<div id="wrapper">
        <div id="header"></div>
        <div id="pageContent"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

    此处示例：http://data.nwtresearch.com/

    另外请注意，如果您想要像您添加的代码一样的完整页面背景，请从包装器 div 中删除 height: auto !important;：http://jsfiddle.net/mdares/a8VVw/

    【讨论】：

      【解决方案7】：

      嗯，不同的浏览器有不同的实现。

      在我看来，最简单、最优雅的解决方案是使用 CSS calc()。不幸的是，这个方法在ie8及更低版本中不可用，在android浏览器和移动opera中也不可用。但是，如果您为此使用单独的方法，则可以尝试以下操作：http://jsfiddle.net/uRskD/

      标记：

      <div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

      还有 CSS：

      html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
    min-height: calc(100% - 40px);
}

      我的次要解决方案涉及粘性页脚方法和框大小。这基本上允许 body 元素填充其父元素的 100% 高度，并使用box-sizing: border-box; 在该 100% 中包含填充。 http://jsfiddle.net/uRskD/1/

      html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#footer {
    background: #f0f;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#body {
    background: #0f0;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

      我的第三种方法是使用 jQuery 设置主要内容区域的最小高度。 http://jsfiddle.net/uRskD/2/

      html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
}

      还有 JS：

      $(function() {
    headerHeight = $('#header').height();
    footerHeight = $('#footer').height();
    windowHeight = $(window).height();
   $('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});

      【讨论】：

      • @Torr3nt 也缺乏跨浏览器支持，特别是旧浏览器和移动浏览器
      【解决方案8】：

      使用没有定义高度的top: 40px 和bottom: 40px（假设您的页脚也是40px），您可以让它工作。

      .header {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    background-color:red;
}
.mainBody {
    width: 100%;
    top: 40px;
    bottom: 40px;
    position: absolute;
    background-color: gray;
}
.footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: blue;
}

      JSFiddle

      【讨论】：

      • -1 为？这工作正常。
      • 我想可能是因为他的页眉和页脚有固定的高度。
      • 页脚和页眉的固定高度是的，所以 10% 的“从顶部”在缩放时不起作用。
      • 现在检查一下，它适用于固定高度的页眉和页脚。
      • 不会随内容展开。
      【解决方案9】：

      虽然这听起来像是一个简单的问题，但实际上并非如此！

      我已经尝试了很多方法来实现您想要使用纯 CSS 实现的目标，但我所有的尝试都失败了。但是.. 如果您使用 javascript 或 jquery，有一个可能的解决方案！

      假设你有这个 CSS：

      #myheader {
    width: 100%;
}
#mybody {
    width: 100%;
}
#myfooter {
    width: 100%;
}

      假设你有这个 HTML：

      <div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>

      用 jquery 试试这个：

      <script>
    $(document).ready(function() {
        var windowHeight = $(window).height();/* get the browser visible height on screen */
        var headerHeight = $('#myheader').height();/* get the header visible height on screen */
        var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
        var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
        var newBodyHeight = windowHeight - headerHeight - footerHeight;
        if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
            $('#mybody').height(newBodyHeight);
        }
    });
</script>

      注意：我没有在这个解决方案中使用绝对定位，因为它在移动浏览器中可能看起来很难看

      【讨论】：

        【解决方案10】：

        不知道你到底想要什么，但我想我明白了。

        标题 - 停留在屏幕顶部？ 页脚 - 停留在屏幕底部？ 内容区域 -> 适合页脚和页眉之间的空间？

        您可以通过绝对定位或固定定位来做到这一点。

        这里是一个绝对定位的例子：http://jsfiddle.net/FMYXY/1/

        标记：

        <div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>

        CSS：

        .header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }

        为了使其发挥最佳效果，我建议使用 % 而不是像素，因为您会遇到不同屏幕/设备尺寸的问题。

        【讨论】：

          猜你喜欢
          • 2019-01-10
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-04-02
          • 2022-12-14
          • 2016-05-22
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode