Question

所以我才刚刚开始学习一些基本的CSS，现在我遇到了一些我不理解的行为。我在<div>内有一个<article>，并且<div>的高度设置为100％。现在，如果<div>的所有父母父母的身高都已指定，则其高度等于父母的身高，但是如果不是这样，则<div>的身高会更小。

下面是一个简单的示例，其中未指定所有高度：

html {
  height: 100%;
}

article {
  background-color: red;
  height: 100%;
}

#side-nav {
  background-color: blue;
  float: left;
  min-width: 10%;
  height: 100%;
  padding: auto;
  margin: 0;
}

#main-content {
  margin-left: 10%;
  width: 90%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>some title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav id="top-nav">
      <div id="main-nav-bar">
        <a class="nav-bar-opt">opt1</a>
        <a class="nav-bar-opt">opt2</a>
        <a class="nav-bar-opt">opt3</a>
      </div>
    </nav>
    <article id="article">
      <div id="side-nav">
        <ul>
          <li><a class="art-link">bullet</a></li>
          <li><a class="art-link">point</a></li>
          <li><a class="art-link">list</a></li>
        </ul>
      </div>
      <div id="main-content">
        <h1>
          title
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue. 
        </p>
        <h3>
          title
        </h3>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
        </p>
        <ul>
          <li>another</li>
          <li>bullet</li>
          <li>point</li>
          <li>list</li>
        </ul>
      </div>
    </article>
  </body>
</html>

请注意，<div>（蓝色）比直接父级<article>（红色）小。

所以现在我的问题是是否有这种情况的原因，以及是否有一些避免指定所有高度的解决方法？

Answer 1

您没有为<body>指定高度，因此其余的高度被卡住，试图找出它的100％。

Answer 2

请设置body{height: 100%}，将蓝色和红色的高度都设置为100％，如下面的工作片段所示，希望对您有所帮助：）

html, body {
  height: 100%;
}

article {
  background-color: red;
  height: 100%;
}

#side-nav {
  background-color: blue;
  float: left;
  min-width: 10%;
  height: 100%;
  padding: auto;
  margin: 0;
}

#main-content {
  margin-left: 10%;
  width: 90%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>some title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav id="top-nav">
      <div id="main-nav-bar">
        <a class="nav-bar-opt">opt1</a>
        <a class="nav-bar-opt">opt2</a>
        <a class="nav-bar-opt">opt3</a>
      </div>
    </nav>
    <article id="article">
      <div id="side-nav">
        <ul>
          <li><a class="art-link">bullet</a></li>
          <li><a class="art-link">point</a></li>
          <li><a class="art-link">list</a></li>
        </ul>
      </div>
      <div id="main-content">
        <h1>
          title
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue. 
        </p>
        <ul>
          <li>another</li>
          <li>bullet</li>
          <li>point</li>
          <li>list</li>
        </ul>
      </div>
    </article>
  </body>
</html>

Answer 3

您需要使用flex来代替将side-nav元素向左浮动。

然后，您无需根据要求在每个元素上指定高度。

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

main {
  height: 98%;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto; /* grow shrink amount */
}

article {
  background-color: #ffeeee;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.5em;
}

#side-nav {
  background-color: #eeeeff;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 11%;
  padding: auto;
  margin: 0;
}

#side-nav ul {
  list-style-type: none;
  margin-left: -2.5em;
}
  
#side-nav li a {
  display: block;
  white-space: nowrap;
  padding: 0.25em;
}
  
#side-nav li a:hover {
  display: block;
  background-color: #0000ff;
  color: #fff;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
  <head>
    <title>some title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav id="top-nav">
      <div id="main-nav-bar">
        <a class="nav-bar-opt">opt1</a>
        <a class="nav-bar-opt">opt2</a>
        <a class="nav-bar-opt">opt3</a>
      </div>
    </nav>
    <main>
      <div id="side-nav">
        <ul>
          <li><a class="art-link">nav</a></li>
          <li><a class="art-link">list</a></li>
          <li><a class="art-link">and</a></li>
          <li><a class="art-link">some</a></li>
          <li><a class="art-link">more</a></li>
          <li><a class="art-link">items</a></li>
        </ul>
      </div>
      <article id="article">
        <h1>
          title
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue. 
        </p>
        <h3>
          title
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
        </p>
        <ul>
          <li>another</li>
          <li>bullet</li>
          <li>point</li>
          <li>list</li>
        </ul>
      </article>
    </main>
  </body>
</html>

CSS高度100％并不总是等于直接父级

3 个答案: