如何使左窗格延伸到右窗格内容的完整高度？

时间：2015-01-19 05:07:17

标签： html css

我一直在努力让这项工作工作2天，并阅读了许多示例和堆栈溢出问题。我是html和css的新手，这是我的第3天。任何有关我所做错事的提示或见解都会受到高度赞赏，以及一般性评论或批评。

我试图让左侧的蓝色窗格延伸整个页面的长度，而不仅仅是浏览器视口的高度。

Here's a jsfiddle

谢谢

#leftPane {
    position: absolute;
    width: 200px;
    margin:0px;
    padding:0px;
    height: 100%;
    background-color: #0e365b;
}

#rightPane {
    position: absolute;
    top:0px;
    left:200px;
    margin:0px;
    padding:0px;
    background-color: #EEEEEE;  
    width: 900px;
    height: 100%;
}

3 个答案:

答案 0 :(得分：3)

问题是，所有元素（leftpane，rightpane，header和mainContent）都位于 absolute 。 绝对定位的元素将从正常流中移除，并相对于位置不是 static 的第一个父元素定位（在这种情况下，＆＃34; html＆＃34 ;）

[提示：打开firebug并检查页面的布局。 ＆＃34;主体＆＃34;没有达到任何高度。]

enter image description here

这就是为什么提供高度：100％给出容器的默认高度而不是文档的完整高度

<强>解决方案：

正如@Prachit上面回答的那样，合法的解决方法是将将绝对定位的元素封装在相对定位的容器中，因为相对定位的元素相对于其正常位置定位，

  • 它将保留在正常流程中。所以，现在给予身高：100％ 将提供文件的高度而不是容器本身。
  • （绝对定位）左撇子，现在知道多少高度 右撇子正在[因为他们两个都将达到高度 他们的父容器]。

您可以从this教程获得有关定位的更多信息。

喝彩！

答案 1 :(得分：2)

您需要container，否则leftpane无法知道rightpane扩展了多少。因此，container到位后，container将展开rightpane，而leftpane是container的子对象，它会获得height当设置为100%并进行适当的定位时。

＆＃13;
＆＃13; 
/* Lightest Blue: 		#4096e5  	(nav boxes)
   Darker Blue: 		#195e9f   	(nav boxes roll over)
   Darker Blue: 		#043d71		(children roll over)
   Darkest Blue: 		#0e365b  	(left pane)
   
   Off-white:		 	#EEEEEE		(right pane background)
*/

* {
  font-family: "Helvetica", sans-serif;
}
body {
  margin: 0px;
  padding: 0px;
  background-color: #EEEEEE;
}
#container {
  position: relative;
  height: auto;
}
#leftPane {
  color: white;
  text-align: justify;
}
#leftPane > p {
  margin: 10px;
}
#leftPane {
  position: absolute;
  width: 200px;
  margin: 0px;
  padding: 0px;
  height: 100%;
  background-color: #0e365b;
}
#leftPane h1,
h2,
h3 {
  text-align: center;
  margin: 10px;
  padding: 0px;
  text-shadow: 5px 5px 10px #000;
}
#rightPane {
  position: relative;
  top: 0px;
  left: 200px;
  margin: 0px;
  padding: 0px;
  background-color: #EEEEEE;
  width: 900px;
  height: 100%;
}
#header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 40px;
}
#nav {
  list-style: none;
  overflow: hidden;
  z-index: 5;
}
#nav li,
ul {
  float: left;
  margin: 0px;
  padding: 0px;
}
#nav a:link,
a:visited,
.top {
  display: block;
  color: #FFFFFF;
  background-color: #4096e5;
  padding: 5px;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
}
#nav a.top:link,
a.top:visited,
.top {
  width: 180px;
  font-weight: bold;
  text-align: center;
}
#nav a.sub:link,
a.sub:visited {
  text-align: left;
}
#nav .divider {
  border-right: 1px black dashed;
}
#nav a:hover,
span:hover {
  background-color: #195e9f;
  text-decoration: none;
}
#nav ul li a:hover {
  background-color: #043d71;
}
#nav ul {
  list-style: none;
  position: absolute;
  left: -9999px;
}
#nav ul li {
  background: #195e9f;
  float: none;
  border-top: 1px black dashed;
}
#nav ul a {
  white-space: nowrap;
}
#nav li:hover ul {
  left: 0px;
  z-index: 5;
  position: absolute;
  width: 100%;
}
#nav li:hover a,
li:hover span {
  /* These create persistent hover states, meaning the top-most link
	   stays 'hovered' even when your cursor has moved down the list. */
  background: #195e9f;
}
#nav li:hover ul a {
  /* The persistent hover state does however create a global style for
	   links even before they're hovered. Here we undo these effects. */
  text-decoration: none;
}
#mainContent {
  position: relative;
  left: 0px;
  top: 40px;
  margin: 10px;
}
＆＃13; 
<body>
  <div id="container">
    <div id="leftPane">
      <h2>Title<br>Section</h2>
      <p>some more text, this should wrap.</p>
    </div>

    <div id="rightPane">
      <div id="header">
        <ul id="nav">
          <li>
            <span class="top divider">Projects</span>
            <ul>
              <li><a class="sub lastA" href="#">One</a>
              </li>
              <li><a class="sub lastA" href="#">Two</a>
              </li>
              <li><a class="sub lastA" href="#section3">Three</a>
              </li>
              <li><a class="sub lastA" href="#">Four</a>
              </li>
            </ul>
          </li>
          <li>
            <span class="top divider">Examples</span>
            <ul>
              <li><a class="sub lastA" href="#">Data Structures</a>
              </li>
            </ul>
          </li>
          <li><a class="top" href="#">Blog</a>
          </li>
        </ul>
      </div>

      <div id="mainContent">
        There are a few interesting things here that should be noted.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <a name="section3">Begin Section 3</a>
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
        <br>.
      </div>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

请参阅此处：here 

<div><!-- make a <div> to hold everything in.. -->

<div style="width:125;height:100%;">blah blah blah</div>

<div style="height:100%;">blah blah blah</div>

</div>
相关问题
最新问题