divs/footer 忽略其他 div 的存在

【问题标题】：divs/footer ignoring other divs existencedivs/footer 忽略其他 div 的存在
【发布时间】：2017-07-12 20:05:14
【问题描述】：

我无法理解这个。我已经研究了一段时间，但我尝试的所有内容和阅读的所有内容都无法真正解决问题。

问题一：

我的 div ".page" 忽略了它的所有子 div。将其设置为 100% 高度并将背景颜色设置为红色以进行测试，结果它只承认某些 div（.image__header div 和页脚）。我已将 html 和 body 设置为宽度和高度 100%；但是，这并不能解决问题。

问题 2：

这导致了我的第二个问题，这可能会通过先前的问题解决方案来解决。添加页脚并设置高度和背景颜色将页脚直接放在 .image__header div 下方。这强调了我的信念，即其他部分（主要和导航）被完全忽略，好像它们甚至没有占用空间（导航是固定在我的页面顶部的固定元素，即使我改变了主要也不起作用它应该是一个 div 和“显示：块”，因为它应该是天生的）。

我的页脚应该只是低于主要部分，但它无法确认主要部分的存在。

虽然我已在底部链接了简短的 CodePen，但有几个 sn-ps 代码。

/*
 * font-family: 'Unica One', cursive;
 * font-family: 'Vollkorn', serif;
 */

body, html {
  width: 100%;
  min-height: 100% !important;
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  height: 70px;
  background: transparent;
  position: fixed;
  color: #fff;
  top: 0;
  z-index: 99;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: right;
}

nav li a {
  display: block;
  text-align: center;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
}

nav li a:hover {
  border-bottom: 3px solid #1abc9c;
}

#logo {
  font-size: 1.5em;
  float: left;
  margin: 0;
  padding: 0;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
  padding: 19px;
  padding-left: 0px;
}

#logo span {
  color: #1abc9c;
}

.nav__inner {
  width: 70%;
  margin: 0 auto;
}

.image__header {
  width: 100%;
  height: 375px;
  top: 0px;
  z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, 0.5),
              rgba(0, 0, 0, 0.5)),
              url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

h1, h2, h4 {
  color: #212121;
  font-family: 'Unica One', cursive;
}

h3, h5 {
  color: #212121;
  font-family: 'Vollkorn', serif;
}

p {
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  color: #212121;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 0.95em;
  border-bottom: 1px solid #212121;
  padding: 15px 0px;
}

.article-header span {
  font-size: 1em;
  color: #888;
  font-family: 'Unica One', cursive;
}

article h2 {
  margin-bottom: 0;
}

article {
  display: block;
}

.main__inner {
  margin: 0 auto;
  width: 60%;
}

section {
  display: inline-block;
}

.content {
  width: 65%;
  float: left;
}

.sidebar {
  float: right;
  width: 25%;
}

snip {
  font-family: monospace;
  background: #ccc;
  padding: 2px 5px;
  border: 1px solid #888;
  border-radius: 5px;
  font-size: 0.7em;
  vertical-align: middle;
  color: #212121;
}

code {
  font-family: monospace;
  color: #212121;
  display: block;
  padding: 15px 10px;
  border-left: 5px solid #1abc9c;
}

pre {
  border: 1px solid #888;
  border-radius: 5px;
  background: #ccc;
  overflow-x: scroll;
}

var {
  color: #16a085;
  font-style: normal;
}

c {
  color: #888;
  font-style: italic;
}

main {
  min-height: 100%;
}

.main__inner:after {
  content: '';
  display: table;
  clear: both;
}

img {
  display: block;
  margin: 0 auto;
}

.page {
  min-height: 100%;
  width: 100%;
  /* Changing height by percentage acts like the only
   * elements on my page are the image in the header
   * and the footer.
   * ---
   * Adding a clearfix to .main__inner resolved this.
  */
}

footer {
  height: 120px;
  width: 100%;
}
<html>

<head>

  <meta charset="utf-8" />
  <link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
  <!-- Also jQuery source in settings -->
  
</head>

<body>

<div class="page">
  
  <div class="page__inner">
    
    <nav class="nav">
      
      <div class="nav__inner">
        
        <div id="logo">
          mynameis<span>jake</span>
        </div> <!-- end #logo -->
        
        <ul>
          <li><a href="https://github.com/mynameisjacobj" class="links">REPOSITORY</a></li>
          <li><a href="#blog" class="links">BLOG</a></li>
          <li><a href="#" class="links">HOME</a></li>
        </ul> <!-- end nav links -->
        
      </div> <!-- end .nav__inner -->
      
    </nav> <!-- end nav -->
    
    <main class="main">

      <div class="image__header">
      </div> <!-- end .image__header -->
      
      <div id="blog" class="main__inner">
        
        <section class="content">
          <article>
            <div class="article-header">
              <h2>UNITY RAYCAST FOR BEGINNERS</h2>
              <span>FEBRUARY 21, 2017</span>
            </div>
            <p>
              Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first&#8212;I know I avoided them initially since I didn't fully understand them&#8212;but they are a incredible tool that can totally help perform countless tasks.
            </p>
<pre><code><var>void</var> Update()
{
  <var>RaycastHit</var> hit;
  <var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
  {
    <var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
    <var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
  }
}</code></pre>
            
            <h3>What is a Raycast and what can I use it for?</h3>
            <p>
              The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
            </p>
            
            <img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
            
          </article>
        </section>
        
        <section class="sidebar">
          <h4>ADDITIONAL CONTENT</h4>
        </section>
        
      </div> <!-- end .main__inner -->

    </main> <!-- end main -->
    
    
    <footer class="footer">
      
      <div class="footer__inner">
        
        WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
        
      </div> <!-- end .footer__inner -->
      
    </footer> <!-- end footer -->
    
  </div> <!-- end .page__inner -->
  
</div> <!-- end .page -->
  
  
</body>
  
</html>

CodePen link with full code

重申一下：我不需要粘性页脚解决方案或固定页脚解决方案。我只需要页脚来确认其他 div 并位于主要部分下方。为什么主要部分被忽略了？

非常感谢任何帮助。感谢您的宝贵时间。

【问题讨论】：

  • 您的页脚没有清除浮动。将clear:both 添加到页脚css。

标签： html css


【解决方案1】：

似乎您只需将clearfix 添加到您的.main__inner 块中，如下所示：

.main__inner:after {
    content: '';
    display: table;
    clear: both;
}

退房：

/*
 * font-family: 'Unica One', cursive;
 * font-family: 'Vollkorn', serif;
 */

body, html {
  width: 100%;
  min-height: 100% !important;
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  height: 70px;
  background: transparent;
  position: fixed;
  color: #fff;
  top: 0;
  z-index: 99;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: right;
}

nav li a {
  display: block;
  text-align: center;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
}

nav li a:hover {
  border-bottom: 3px solid #1abc9c;
}

#logo {
  font-size: 1.5em;
  float: left;
  margin: 0;
  padding: 0;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
  padding: 19px;
  padding-left: 0px;
}

#logo span {
  color: #1abc9c;
}

.nav__inner {
  width: 70%;
  margin: 0 auto;
}

.image__header {
  width: 100%;
  height: 375px;
  top: 0px;
  z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, 0.5),
              rgba(0, 0, 0, 0.5)),
              url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

h1, h2, h4 {
  color: #212121;
  font-family: 'Unica One', cursive;
}

h3, h5 {
  color: #212121;
  font-family: 'Vollkorn', serif;
}

p {
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  color: #212121;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 0.95em;
  border-bottom: 1px solid #212121;
  padding: 15px 0px;
}

.article-header span {
  font-size: 1em;
  color: #888;
  font-family: 'Unica One', cursive;
}

article h2 {
  margin-bottom: 0;
}

article {
  display: block;
}

.main__inner {
  margin: 0 auto;
  width: 60%;
}

.main__inner:after {
  content: '';
  display: table;
  clear: both;
}

section {
  display: inline-block;
}

.content {
  width: 65%;
  float: left;
}

.sidebar {
  float: right;
  width: 25%;
}

snip {
  font-family: monospace;
  background: #ccc;
  padding: 2px 5px;
  border: 1px solid #888;
  border-radius: 5px;
  font-size: 0.7em;
  vertical-align: middle;
  color: #212121;
}

code {
  font-family: monospace;
  color: #212121;
  display: block;
  padding: 15px 10px;
  border-left: 5px solid #1abc9c;
}

pre {
  border: 1px solid #888;
  border-radius: 5px;
  background: #ccc;
  overflow-x: scroll;
}

var {
  color: #16a085;
  font-style: normal;
}

c {
  color: #888;
  font-style: italic;
}

main {
  min-height: 100%;
}

img {
  display: block;
  margin: 0 auto;
}

.page {
  background: red;
  min-height: 100%;
  width: 100%;
  /* Changing height by percentage acts like the only
   * elements on my page are the image in the header
   * and the footer.
  */
}

footer {
  height: 120px;
  width: 100%;
}
<html>

<head>

  <meta charset="utf-8" />
  <link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
  <!-- Also jQuery source in settings -->
  
</head>

<body>

<div class="page">
  
  <div class="page__inner">
    
    <nav class="nav">
      
      <div class="nav__inner">
        
        <div id="logo">
          mynameis<span>jake</span>
        </div> <!-- end #logo -->
        
        <ul>
          <li><a href="https://github.com/mynameisjacobj" class="links">REPOSITORY</a></li>
          <li><a href="#blog" class="links">BLOG</a></li>
          <li><a href="#" class="links">HOME</a></li>
        </ul> <!-- end nav links -->
        
      </div> <!-- end .nav__inner -->
      
    </nav> <!-- end nav -->
    
    <main class="main">

      <div class="image__header">
      </div> <!-- end .image__header -->
      
      <div id="blog" class="main__inner">
        
        <section class="content">
          <article>
            <div class="article-header">
              <h2>UNITY RAYCAST FOR BEGINNERS</h2>
              <span>FEBRUARY 21, 2017</span>
            </div>
            <p>
              Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first&#8212;I know I avoided them initially since I didn't fully understand them&#8212;but they are a incredible tool that can totally help perform countless tasks.
            </p>
<pre><code><var>void</var> Update()
{
  <var>RaycastHit</var> hit;
  <var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
  {
    <var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
    <var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
  }
}</code></pre>
            
            <h3>What is a Raycast and what can I use it for?</h3>
            <p>
              The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
            </p>
            
            <img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
            
          </article>
        </section>
        
        <section class="sidebar">
          <h4>ADDITIONAL CONTENT</h4>
        </section>
        
      </div> <!-- end .main__inner -->

    </main> <!-- end main -->
    
    
    <footer class="footer">
      
      <div class="footer__inner">
        
        WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
        
      </div> <!-- end .footer__inner -->
      
    </footer> <!-- end footer -->
    
  </div> <!-- end .page__inner -->
  
</div> <!-- end .page -->
  
  
</body>
  
</html>

CodePen

【讨论】：

  • 有什么理由比浮动页脚和 .page div 更适合此修复？我不确定我是否完全理解为什么这是一个好的解决方案（不要敲它，因为我真的不明白为什么浮动 div 也会起作用）。
  • @JacobJohnson 在不需要的情况下使用float 总是一个糟糕的解决方案。你应该只在真正需要的情况下使用float。
  • 我对您的解决方案进行了一些阅读，并认为这是正确的答案。谢谢你的解释！
【解决方案2】：

只需将float:left; 放入两个容器即可。我建议使用带类的 div，而不是页脚……或者说实话。

/*
 * font-family: 'Unica One', cursive;
 * font-family: 'Vollkorn', serif;
 */

body,
html {
  width: 100%;
  min-height: 100% !important;
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  height: 70px;
  background: transparent;
  position: fixed;
  color: #fff;
  top: 0;
  z-index: 99;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: right;
}

nav li a {
  display: block;
  text-align: center;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
}

nav li a:hover {
  border-bottom: 3px solid #1abc9c;
}

#logo {
  font-size: 1.5em;
  float: left;
  margin: 0;
  padding: 0;
  font-family: 'Unica One', cursive;
  /* border: 1px solid red; */
  padding: 19px;
  padding-left: 0px;
}

#logo span {
  color: #1abc9c;
}

.nav__inner {
  width: 70%;
  margin: 0 auto;
}

.image__header {
  width: 100%;
  height: 375px;
  top: 0px;
  z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

h1,
h2,
h4 {
  color: #212121;
  font-family: 'Unica One', cursive;
}

h3,
h5 {
  color: #212121;
  font-family: 'Vollkorn', serif;
}

p {
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  color: #212121;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 0.95em;
  border-bottom: 1px solid #212121;
  padding: 15px 0px;
}

.article-header span {
  font-size: 1em;
  color: #888;
  font-family: 'Unica One', cursive;
}

article h2 {
  margin-bottom: 0;
}

article {
  display: block;
}

.main__inner {
  margin: 0 auto;
  width: 60%;
}

section {
  display: inline-block;
}

.content {
  width: 65%;
  float: left;
}

.sidebar {
  float: right;
  width: 25%;
}

snip {
  font-family: monospace;
  background: #ccc;
  padding: 2px 5px;
  border: 1px solid #888;
  border-radius: 5px;
  font-size: 0.7em;
  vertical-align: middle;
  color: #212121;
}

code {
  font-family: monospace;
  color: #212121;
  display: block;
  padding: 15px 10px;
  border-left: 5px solid #1abc9c;
}

pre {
  border: 1px solid #888;
  border-radius: 5px;
  background: #ccc;
  overflow-x: scroll;
}

var {
  color: #16a085;
  font-style: normal;
}

c {
  color: #888;
  font-style: italic;
}

main {
  min-height: 100%;
}

img {
  display: block;
  margin: 0 auto;
}

.page {
  background: red;
  min-height: 100%;
  width: 100%;
  float: left;
  /* Changing height by percentage acts like the only
   * elements on my page are the image in the header
   * and the footer.
  */
}

footer {
  float: left;
  height: 120px;
  width: 100%;
}
<html>

<head>

  <meta charset="utf-8" />
  <link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
  <!-- Also jQuery source in settings -->

</head>

<body>

  <div class="page">

    <div class="page__inner">

      <nav class="nav">

        <div class="nav__inner">

          <div id="logo">
            mynameis<span>jake</span>
          </div>
          <!-- end #logo -->

          <ul>
            <li><a href="https://github.com/mynameisjacobj" class="links">REPOSITORY</a></li>
            <li><a href="#blog" class="links">BLOG</a></li>
            <li><a href="#" class="links">HOME</a></li>
          </ul>
          <!-- end nav links -->

        </div>
        <!-- end .nav__inner -->

      </nav>
      <!-- end nav -->

      <main class="main">

        <div class="image__header">
        </div>
        <!-- end .image__header -->

        <div id="blog" class="main__inner">

          <section class="content">
            <article>
              <div class="article-header">
                <h2>UNITY RAYCAST FOR BEGINNERS</h2>
                <span>FEBRUARY 21, 2017</span>
              </div>
              <p>
                Unity's
                <snip>Raycast</snip> and
                <snip>Raycast2D</snip> may seem somewhat daunting at first&#8212;I know I avoided them initially since I didn't fully understand them&#8212;but they are a incredible tool that can totally help perform countless tasks.
              </p>
              <pre><code><var>void</var> Update()
{
  <var>RaycastHit</var> hit;
  <var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
  {
    <var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
    <var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
  }
}</code></pre>

              <h3>What is a Raycast and what can I use it for?</h3>
              <p>
                The raycast is essentially an imaginary line that utilizes a
                <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a
                <snip>RaycastHit</snip>.
              </p>

              <img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />

            </article>
          </section>

          <section class="sidebar">
            <h4>ADDITIONAL CONTENT</h4>
          </section>

        </div>
        <!-- end .main__inner -->

      </main>
      <!-- end main -->


      <footer class="footer">

        <div class="footer__inner">

          WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?

        </div>
        <!-- end .footer__inner -->

      </footer>
      <!-- end footer -->

    </div>
    <!-- end .page__inner -->

  </div>
  <!-- end .page -->


</body>

</html>

【讨论】：

  • 为什么浮动值是一个解决方案？我不确定为什么，而且我以前从未遇到过这个问题（尽管我确信我从来没有专门这样做过）。此外，有什么理由不使用页脚或主要而不是仅使用 div？好习惯？还是选项选项有什么不稳定的地方？
  • 与旧浏览器的兼容性问题。至于浮动，@Sergey 写了一个更好的答案。 :)
【解决方案3】：

从类.content的部分中删除float: left

http://codepen.io/anon/pen/XMrVVv?editors=1100

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2017-05-09
    • 2010-12-10
    • 1970-01-01
    • 1970-01-01
    • 2018-10-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    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