Question

我无法绕过这一个。我一直在研究它，但我尝试的所有内容和我读到的所有内容都无法真正解决问题。

问题1：

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

问题2：

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

我的页脚应该简单地落在主要部分之下，但它不能确认主要存在。

虽然我已将简短的CodePen链接到底部，但仍有几段代码。

/*
 * 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并坐在主要部分下方。为什么忽略主要部分？

非常感谢任何帮助。谢谢你的时间。

Answer 1

只需将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>

Answer 2

好像你应该在你的.main__inner块中添加clearfix，如下所示：

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

退房：

＆＃13;

/*
 * 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%;
}

＆＃13;

<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>

＆＃13;

CodePen

div / footer忽略了其他div存在

2 个答案: