css - 100% 高度内容的 HTML5/CSS 页脚问题-6ren

css - 100% 高度内容的 HTML5/CSS 页脚问题

转载作者：太空宇宙更新时间：2023-11-04 13:57:18

这是我目前的网站:

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8"/>
      <link rel="stylesheet" type="text/css" href="css/style.css"/>
   </head>
   <body>
      <section id="wrapper">
         <header>
         </header>
         <main>
            <section class="content">
               Test
            </section>
         </main>
         <footer>
         </footer>
      </section>
   </body>
</html>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #e4e4e4 !important;
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif !important;
    font-weight: 300;
    color: #fff !important;
}

#wrapper {
    min-height:100%;
    position:relative;
}

header {
    height: 193px;
    line-height: 193px;
    background: #bc0000;
}

main {
    padding-bottom:137px;
}

.content {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    background: #000;
}

footer {
    width:100%;
    height:137px;
    position:absolute;
    bottom:0;
    left:0;
    background: #bc0000;
}

我希望黑色内容框的高度为 100%。

我把它添加到 CSS 中

#wrapper, main, .content {
    height: 100%;
}

网站看起来像这样:如何在不破坏网站的情况下使黑色区域仅从页眉到页脚？

谢谢

最佳答案

标题的高度固定为 193px，因此您可以使用 calc() 函数

#wrapper, main, .content {
    height: -webkit-calc(100% - 193px);
    height: -moz-calc(100% - 193px);
    height: calc(100% - 193px);
}

我没有考虑可能影响此参数的其他值(如边框、边距等)，因此请调整此值以使其适合您的设计。

必要时使用供应商前缀。 Browser support for calc()

关于css - 100% 高度内容的 HTML5/CSS 页脚问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21759763/

文章推荐： php - Wordpress 单篇文章内容未显示

文章推荐： jquery - 如何使用 jQuery 从文件输入中捕获文件名？

文章推荐： c++ - 在 Qt 中将变量从选项卡传递到 QTabWidget 中的选项卡

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 100% 高度内容的 HTML5/CSS 页脚问题