html - header 内容包装到#header 但#header 显示为空

Question

我的 header 内容被包装到#header 中，但是当我设置边框显示结构时，它显示我的#header 的内容出现在#header 本身之后。可能是什么问题？这是我的代码:

#header {
	border:1px solid red;
	max-height:150px;
}

#logo {
	border:1px solid red;
	display:inline-block;
	float:left;
}

#navbar {
	border:1px solid red;
	display:inline-block;
    float:right;
}

#logo_img {
	max-height:50px;
}

.nav li {
	display:inline;
}

<div id="header">
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="header-left clearfix">
                <div id="logo" class="logo">
                    <a href="index.html"><img id="logo_img" src="img/yoursite_logo.png" alt="YourSite Logo"></a>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="header-right clearfix">
                <div id="navbar">
                    <div class="container-fluid">
                       <ul class="nav">
                           <li><a href="#banner">Home</a></li>
                           <li><a href="#about">About</a></li>
                           <li><a href="#services">Services</a></li>
                           <li><a href="#portfolio">Portfolio</a></li>
                           <li><a href="#footer">Contact</a></li>
                       </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

如果您使用 float ，您可以对标题使用 clearfix 以使其扩展到内容大小，如下所示:

#header {
  border:1px solid red;
  max-height:150px;
}

#logo {
  border:1px solid red;
  display:inline-block;
  float:left;
}

#navbar {
  border:1px solid red;
  display:inline-block;
  float:right;
}

#logo_img {
  max-height:50px;
}

.nav li {
  display:inline;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

<div id="header" class="clearfix">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="header-left clearfix">
          <div id="logo" class="logo">
            <a href="index.html"><img id="logo_img" src="img/yoursite_logo.png" alt="YourSite Logo"></a>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="header-right clearfix">
          <div id="navbar">
            <div class="container-fluid">
              <ul class="nav">
                <li><a href="#banner">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#footer">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

编辑:

当您包含 Bootstrap 样式表时，菜单会变大，因此您可能希望从 #header 中删除 max-height 以便它能够扩展到全高。可能您对菜单有其他一些用途，因此它不会一直扩展/打开。