在 Chrome Inspect 期间修复了 html 布局之外的页脚踢

Posted

技术标签:

【中文标题】在 Chrome Inspect 期间修复了 html 布局之外的页脚踢【英文标题】：Fixed footer kick outside html layout during Chrome Inspect 【发布时间】：2021-08-09 00:19:55 【问题描述】：

我正在尝试制作一个始终位于页面底部的简单页脚。页面内容永远不会超过屏幕大小，因此无需向下滚动。 （基本上会有 5 个不同的 html 页面，我希望页脚和页眉始终相同。）

但是，一旦我“固定”了页脚，当我在 Chrome 中检查页面时，页脚不再是正文或 html 布局的一部分。

我可以根据需要让页脚出现在屏幕上（使用换行将宽度设置为 65% 并居中），但我认为当指向 body 和 html 时，页脚应该在检查时突出显示。

知道为什么会这样吗？它似乎是根据页脚的位置更改为固定发生的。

这里是 HTML 和相关的 CSS：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="../normalize.css">
  <link rel="stylesheet" href="index-styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" 
  integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  <title>Play2Learn Home Page</title>
</head>
<body>
    <header>
      <h1>Play2Learn Logo</h1>
        <nav>
            <ul>
                <li><a class="border" href="index.html">Home</a></li> 
                <li id="games-li"><a class="border" href="#">Games</a> 
                    <ul id="games-ul">
                        <li><a href="games/anagram-hunt.html">Anagram Hunt </a></li>
                        <li><a href="games/math-facts.html">Math Facts Practice</a></li>
                    </ul>
                </li>
                <li><a class="border" href="about.html">About</a></li> 
                <li><a href="login.html">Login </a></li> 
            </ul>
        </nav>
    </header>
<main>
    <div id="testimonial">Happy Clients Say...</div>
    <div id="quote">"I never have more fun than when I'm playing Anagram Hunt. It's the best game I've ever played!"</div>
    <div id="author">-Justin Jest</div>
    <section id="grids">
        <div id="grid1">
            <h3 class="article-title">Anagram Hunt</h3>
                <article id="article1">Lorem ipsum dolor 
                    sit amet, consectetur adipiscing elit. 
                    Cura bitur tristique odio ac sem congue luctus.
                    Praesent vel rutrum lectus.
                    Nam mattis finibus odio. Suspendisse ligula orci, 
                    ullamcorper vitae nulla nec, tempor auctor felis. 
                    Sed eu luctus sem.
                </article>
            <a href="games/anagram-hunt.html" title="Play Anagram Hunt"><button>Play</button></a>
        </div>
        <div id="grid2">
            <h3 class="article-title">Math Facts Practice</h3>
                <article id="article2">Lorem ipsum dolor 
                    sit amet, consectetur adipiscing elit. 
                    Cura bitur tristique odio ac sem congue luctus.
                    Praesent vel rutrum lectus.
                    Nam mattis finibus odio. Suspendisse ligula orci, 
                    ullamcorper vitae nulla nec, tempor auctor felis. 
                    Sed eu luctus sem.
                </article>
            <a href="games/math-facts.html" title="Play Math Facts Practice"><button>Play</button></a>
        </div>
    </section>
</main>
    <footer>
    &#169 2021 Play2Learn
    <a href="contact-us.html" title="Contact Us"><i class="fas fa-envelope-square"></i></a>
        <a href="https://instagram.com" title="Instagram"><i class="fab fa-instagram-square"></i></a>
        <a href="https://twitter.com" title="Twitter"><i class="fab fa-twitter-square"></i></a>
        <a href="https://facebook.com" title="Facebook"><i class="fab fa-facebook-square"></i></a>
    </footer>
</body>
</html>

footer 
    border-top: 2px solid black;
    width: 100%;
    height: 60px;
    font-size: 12px;
    padding-top: 0.5rem;
    bottom: 0;
    position: fixed;
    
    
 footer a 
     color: inherit;
     font-size: 46px;
     padding-left: 1rem;

【问题讨论】：

【参考方案1】：

我想这就是你需要的：https://matthewjamestaylor.com/bottom-footer

在这里它与您的代码集成：

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


#container 
  margin-left:0.5em;
  min-height:100%;
  position:relative;


header 
  padding:0.1px;

  
main 
  padding-bottom:60px;  /* Height of the footer */

  
footer 
  border-top: 2px solid black;
  width: 100%;
  font-size: 12px;
  padding-top: 0.5rem;
  bottom:0;
  position:absolute;


 footer a 
   color: inherit;
   font-size: 46px;
   padding-left: 1rem;
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="../normalize.css">
  <link rel="stylesheet" href="index-styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" 
  integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  <title>Play2Learn Home Page</title>
</head>
<body>
<div id="container">
    <header>
      <h1>Play2Learn Logo</h1>
        <nav>
            <ul>
                <li><a class="border" href="index.html">Home</a></li> 
                <li id="games-li"><a class="border" href="#">Games</a> 
                    <ul id="games-ul">
                        <li><a href="games/anagram-hunt.html">Anagram Hunt </a></li>
                        <li><a href="games/math-facts.html">Math Facts Practice</a></li>
                    </ul>
                </li>
                <li><a class="border" href="about.html">About</a></li> 
                <li><a href="login.html">Login </a></li> 
            </ul>
        </nav>
    </header>
<main>
    <div id="testimonial">Happy Clients Say...</div>
    <div id="quote">"I never have more fun than when I'm playing Anagram Hunt. It's the best game I've ever played!"</div>
    <div id="author">-Justin Jest</div>
    <section id="grids">
        <div id="grid1">
            <h3 class="article-title">Anagram Hunt</h3>
                <article id="article1">Lorem ipsum dolor 
                    sit amet, consectetur adipiscing elit. 
                    Cura bitur tristique odio ac sem congue luctus.
                    Praesent vel rutrum lectus.
                    Nam mattis finibus odio. Suspendisse ligula orci, 
                    ullamcorper vitae nulla nec, tempor auctor felis. 
                    Sed eu luctus sem.
                </article>
            <a href="games/anagram-hunt.html" title="Play Anagram Hunt"><button>Play</button></a>
        </div>
        <div id="grid2">
            <h3 class="article-title">Math Facts Practice</h3>
                <article id="article2">Lorem ipsum dolor 
                    sit amet, consectetur adipiscing elit. 
                    Cura bitur tristique odio ac sem congue luctus.
                    Praesent vel rutrum lectus.
                    Nam mattis finibus odio. Suspendisse ligula orci, 
                    ullamcorper vitae nulla nec, tempor auctor felis. 
                    Sed eu luctus sem.
                </article>
            <a href="games/math-facts.html" title="Play Math Facts Practice"><button>Play</button></a>
        </div>
    </section>
</main>
    <footer>
    &#169 2021 Play2Learn
    <a href="contact-us.html" title="Contact Us"><i class="fas fa-envelope-square"></i></a>
        <a href="https://instagram.com" title="Instagram"><i class="fab fa-instagram-square"></i></a>
        <a href="https://twitter.com" title="Twitter"><i class="fab fa-twitter-square"></i></a>
        <a href="https://facebook.com" title="Facebook"><i class="fab fa-facebook-square"></i></a>
    </footer>
    </div>
</body>
</html>

（注意页脚高度在padding-bottom 中设置为main。）

【讨论】：

非常感谢。问题在于 html 和 body 元素上没有“height: 100%”。一旦我添加了我可以对页脚（绝对、固定等）做任何我想做的事情，并使用换行和其他所有操作。感激不尽！

以上是关于在 Chrome Inspect 期间修复了 html 布局之外的页脚踢的主要内容，如果未能解决你的问题，请参考以下文章

Chrome://inspect 显示设备，但不显示任何打开的标签

使用 Inspect 检查页面时，Chrome 不显示屏幕的宽度和高度

使用Inspect检查页面时，Chrome不显示屏幕的宽度和高度

Chrome DevTools [chrome://inspect]：404 Not Found 找不到资源

Chrome DevTools 没有inspect按钮

Chrome 检查器 - 远程调试器 - 在托管模式下未启用剪贴板。请使用 chrome://inspect 检查