html - 为什么高度不影响我的 div？

Question

我的站点 header 有问题，我一辈子都弄不明白。我想将标题分成两列。标题的高度应由左栏内的 h1 和 p 标签的内容决定。右栏应分成两行，高度相等，包含导航菜单和社交链接。我想将每个菜单垂直对齐在其父 div 的中心。出于某种原因，高度属性根本不会改变那些右列行的高度。我究竟做错了什么？有一个更好的方法吗？这是一个 jsFiddle向您展示我目前得到的东西。感谢您的宝贵时间。

HTML:

<header>
  <div id="banner">
    <div class="container">
      <div id="banner-inner">
        <div id="banner-left">
          <h1>Site Name</h1>
          <p>Some catchy slogan...</p>
        </div>
        <div id="banner-right">
          <div id="banner-top">
            <ul>
              <li>Find Me On:</li>
              <li><a href+ "#" title="Facebook"><i class="fa fa-facebook-square"></i></a></li>
              <li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
              <li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
              <li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
          <div id="banner-bottom">
            <nav>
              <ul id="menu-menu-1" class="nav navbar-nav">
                <li><a title="Home" href+ "#">Home</a></li>
                <li><a title="Blog" href+ "#">Blog</a></li>
                <li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="HTML &amp; CSS" href+ "#">HTML &#038; CSS</a></li>
                    <li><a title="JavaScript &amp; jQuery" href+ "#">JavaScript &#038; jQuery</a></li>
                    <li><a title="PHP" href+ "#">PHP</a></li>
                    <li><a title="MySQL" href+ "#">MySQL</a></li>
                  </ul>
                </li>
                <li><a title="Portfolio" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="Web Designs" href+ "#">Web Designs</a></li>
                    <li><a title="Photo Gallery" href+ "#">Photo Gallery</a></li>
                    <li><a title="Development Projects" href+ "#">Development Projects</a></li>
                    <li><a title="Graphic Designs" href+ "#">Graphic Designs</a></li>
                  </ul>
                </li>
                <li><a title="Services" href+ "#">Services</a></li>
                <li><a title="About" href+ "#">About</a></li>
                <li><a title="Contact" href+ "#">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

CSS:

header {
    background: #D7DADB;
    margin: 0px;
    padding: 0px 15px;
    border-bottom: 15px solid #FC4349;
    display: table;
    position: relative;
    width: 100%;
}

header #banner {
    padding: 5px;
    display: table;
    position: relative;
    width: 100%;
    color: #2C3E50;
    margin: 0px;
}

header #banner #banner-inner {
    width: 100%;
}

header #banner #banner-left {
    padding: 0px 25px 0px 0px;
    float: left;
}
header #banner #banner-left h1 {
    font-size: 4em;
    color: #FC4349;
    font-family: PowerChord;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    margin: 0px;
    padding: 0px;
    line-height: 1.3em;
}

header #banner-left p {
    font-size: 1.7em;
    font-family: Nirmala;
    color: #2C3E50;
    margin: 0px 0px 10px 0px;
    line-height: 1.3em;
}

header #banner #banner-right {
    text-align: right;
    height: 100%;
    float: right;
}

header #banner #banner-right #banner-top {
    text-align: right;
    height: 50%;
    overflow: auto;
}
header #banner #banner-right #banner-top ul {
    list-style: none;
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 0;
}

header #banner #banner-right #banner-top > ul > li {
    display: inline-block;
    margin-right: 15px;
}

header #banner #banner-right #banner-top > ul > li a {
    font-size: 1.5em;
    color: #FC4349;
}
header #banner #banner-right #banner-bottom {
    border-top: 1px solid #6DBCDB;
    text-align: right;
}
header #banner #banner-right #banner-bottom > nav {
    position: relative;
}
.nav.navbar-nav {
    position: relative;
}
.nav.navbar-nav > li > a {
    color: #2C3E50;
    font-family: NirmalaBold;
    font-size: 1.3em;
    padding: 5px 5px;
}
.nav.navbar-nav > li > a:hover {
    background: #FC4349;
    color: #fff;
}
.nav.navbar-nav > li > a:focus {
    background: #6DBCDB;
    color: #fff;
}
.dropdown-menu {
    background: #fff;
    border: 1px solid #FC4349;
    border-bottom: 0px;
    padding: 0px;
}
.dropdown-menu > li {
    border-bottom: 1px solid #FC4349;
}
.dropdown-menu > li > a {
    color: #FC4349;
    text-decoration: none;
    padding: 15px 25px 15px 10px;
}
.dropdown-menu > li > a:hover{
    background: #FC4349;
    color: #fff;
}

这是我希望的样子:

Answer 1

我想这样就可以了:

https://jsfiddle.net/2k5p2cwg/

header {
	background: #D7DADB;
	margin: 0px;
	padding: 0px 15px;
	border-bottom: 15px solid #FC4349;
	display: table;
	position: relative;
	width: 100%;
}

header #banner {
	padding: 5px;
	display: table;
	position: relative;
	width: 100%;
	color: #2C3E50;
	margin: 0px;
}

header #banner #banner-inner {
	width: 100%;
}

header #banner #banner-left {
	padding: 0px 25px 0px 0px;
	float: left;
}
header #banner #banner-left h1 {
	font-size: 4em;
	color: #FC4349;
	font-family: PowerChord;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff;
	margin: 0px;
	padding: 0px;
	line-height: 1.3em;
}

header #banner-left p {
	font-size: 1.7em;
	font-family: Nirmala;
	color: #2C3E50;
	margin: 0px 0px 10px 0px;
	line-height: 1.3em;
}

header #banner #banner-right {
	text-align: right;
	height: 100%;
	float: right;
}

header #banner #banner-right #banner-top {
	text-align: right;
	height: 50%;
	overflow: auto;
}
header #banner #banner-right #banner-top ul {
	list-style: none;
	width: 100%;
	text-align: right;
	margin: 0;
	padding: 0;
}

header #banner #banner-right #banner-top > ul > li {
	display: inline-block;
	margin-right: 15px;
}

header #banner #banner-right #banner-top > ul > li a {
	font-size: 1.5em;
	color: #FC4349;
}
header #banner #banner-right #banner-bottom {
	border-top: 1px solid #6DBCDB;
	text-align: right;
}
header #banner #banner-right #banner-bottom > nav {
	position: relative;
}
.nav.navbar-nav {
	position: relative;
}
.nav.navbar-nav > li > a {
	color: #2C3E50;
	font-family: NirmalaBold;
	font-size: 1.3em;
	padding: 5px 5px;
}
.nav.navbar-nav > li > a:hover {
	background: #FC4349;
	color: #fff;
}
.nav.navbar-nav > li > a:focus {
	background: #6DBCDB;
	color: #fff;
}
.dropdown-menu {
	background: #fff;
	border: 1px solid #FC4349;
	border-bottom: 0px;
	padding: 0px;
}
.dropdown-menu > li {
	border-bottom: 1px solid #FC4349;
}
.dropdown-menu > li > a {
	color: #FC4349;
	text-decoration: none;
	padding: 15px 25px 15px 10px;
}
.dropdown-menu > li > a:hover{
	background: #FC4349;
	color: #fff;
}

/* New css styles */
html,body{
  height: 100%;
}
#banner-inner:before,
#banner-inner:after {
    content: "";
    display: table;
} 
#banner-inner:after {
    clear: both;
}
#banner-inner {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
    position: relative;
}
header #banner #banner-right {
  position: absolute;
  right: 0;
}
header #banner #banner-right #banner-top,
header #banner #banner-right #banner-bottom{
  display: table;
  height: 50%;
  width: 100%;
}
header #banner #banner-right #banner-top ul,
header #banner #banner-right #banner-bottom > nav {
    display: table-cell;
    vertical-align: middle;
}

<header>
  <div id="banner">
    <div class="container">
      <div id="banner-inner">
        <div id="banner-left">
          <h1>Site Name</h1>
          <p>Some catchy slogan...</p>
        </div>
        <div id="banner-right">
          <div id="banner-top">
            <ul>
              <li>Find Me On:</li>
              <li><a href+ "#" title="Facebook"><i class="fa fa-facebook-square"></i></a></li>
              <li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
              <li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
              <li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
          <div id="banner-bottom">
            <nav>
              <ul id="menu-menu-1" class="nav navbar-nav">
                <li><a title="Home" href+ "#">Home</a></li>
                <li><a title="Blog" href+ "#">Blog</a></li>
                <li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="HTML &amp; CSS" href+ "#">HTML &#038; CSS</a></li>
                    <li><a title="JavaScript &amp; jQuery" href+ "#">JavaScript &#038; jQuery</a></li>
                    <li><a title="PHP" href+ "#">PHP</a></li>
                    <li><a title="MySQL" href+ "#">MySQL</a></li>
                  </ul>
                </li>
                <li><a title="Portfolio" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="Web Designs" href+ "#">Web Designs</a></li>
                    <li><a title="Photo Gallery" href+ "#">Photo Gallery</a></li>
                    <li><a title="Development Projects" href+ "#">Development Projects</a></li>
                    <li><a title="Graphic Designs" href+ "#">Graphic Designs</a></li>
                  </ul>
                </li>
                <li><a title="Services" href+ "#">Services</a></li>
                <li><a title="About" href+ "#">About</a></li>
                <li><a title="Contact" href+ "#">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>