Question

我正在尝试在页面左侧创建一个与网站一样长的垂直导航栏（即向下延伸到页脚）。但是，当它上面没有任何东西时它只是正确的高度 - 当我添加网站的标题时，导航栏比网站更长。

gameList - root node
Basketball - child node of gameList
   addedBy: "xxx" - child node of key Basketball
   gamename: "Basketball" - child node of key Basketball

body{ 	
        padding: 0px;
        margin: 10px auto 0 auto;
        font-family: 'corbel','arial';
        background: #fff;
        color: #444; /* text colour */
        max-width: 1500px;
        height: auto;
        position: relative;
       }

      footer{
	    background: #333;
      	color: #fff;
      	padding: .1em 3em;
      	width: auto;	
       	margin-left: 130px;
       }
      h1{
	      text-align: center;
	      font-size: 85px;
          padding: 10px;
      	  margin: auto;
          margin-top: 10px;
       }
       #content{
	      margin-left: 150px;
       }
      /* Navbar */
       #navbar{
	      background-color: #599;
	      list-style-type: none;
	      overflow: hidden;
	      width: 130px;
	      margin: 0px;
	

    font-family: 'corbel','arial';
    	text-align: center;
    	padding-left: 0px;
    	height: 100%;
    	float: left;
    	position: absolute;	
    }
    #nav_li{
    	
    	text-align: center;
    }
    #nav_a{
    	text-decoration: none;	
    	margin: 10px;
    	display: inline-block;
    	color: white;
    }

非常感谢能够提供帮助的任何人！

Answer 1

有多种方法可以解决此问题 - 最简单的方法是将html, body背景颜色作为CSS中的侧边栏（使用height: 100%），然后添加粘性header和在顶部和底部footer，并在容器元素上添加背景颜色。

这样的事情：

* { margin: 0; padding: 0;}
html, body {
  height: 100%;
  background: blue;
  }
#content {
  background: white;
 }
h1 {
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3em;
  }
#menu {
  margin-top: 3.5em;
  float: left;
  width: 7em;
  color: white;
  }
#content {
  background: white;
  height: 100%;
  margin: 3em 0 4em 7em;
  padding-top: 3.5em;
  }
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4em;
  background: gray;
  }

<body>
  <h1>This is a heading</h1>
  <ul id="menu">
     <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div id="content">
    <p>Something goes in here</p>
  </div>
 <footer>This is the footer</footer>
 </body>

Answer 2

尝试使用position:fixed和min/max-height我还建议使用calc()来计算导航栏的大小。这里有jsfiddle

元素高于它时，垂直导航栏会变长吗？

2 个答案: