垂直条高度为100％

时间：2016-11-02 05:31:10

标签： html css css3

我有一个容器类。在这个班级里面都是我的元素。包括垂直条（链接面板）和它旁边的div（control_panel）。我试图给我的垂直条高度：100％。我知道我必须为容器类提供100％的高度才能工作，但每次我尝试这样做时，（control_panel）div都会在页脚顶部运行（一个不在容器中的元素）。我已经做了一个我正在经历的问题，但请注意，真实文件中的页脚会动态添加到HTML中，因此我没有将它包含在我的容器类中。）

我也试过给身高100％，但身体没有反映垂直条的任何变化，因为垂直条的父级是容器。我如何制作它以便我可以实现100％高度的垂直条向下延伸到页脚？ Here's my jsFiddle 

.container {
  display: block;
  margin: 0px auto;
  width: 100%;
}
.footer {
  display: block;
  width: 100%;
  height: 500px;
  background-color: black;
  margin-top: 0px;
}
html,
body {
  position: relative;
  height: 100%;
  background-color: #f2f2f2;
}
.control_panel {
  position: relative;
  display: inline-block;
  width: 60%;
  margin-left: 0px;
}
.control_title {
  display: block;
  background-color: white;
  height: 100px;
  margin-bottom: 30px;
}
.control_settings {
  display: block;
  background-color: white;
  height: 900px;
  width: 900px;
}
.link-panel {
  position: relative;
  float: left;
  width: 30%;
  height: 100%;
  background-color: #333333;
}
.link-panel ul {
  list-style-type: none;
  font-size: 19px;
  margin-top: 35px;
}
.link-panel li {
  margin-top: 15px;
}
<html>

<body>
  <div class="container">

    <div class='control_panel'>
      <div class='control_title'>
        <h2>Your Settings</h2>
      </div>

      <div class='control_settings'>

      </div>
    </div>

    <div class="link-panel">
      <ul>


        <li>Dashboard</li>
        <hr>
        <li>Blog</li>
        <hr>
        <li><span><b>|</b> Settings</span>
        </li>
        <hr>
        <li>Contact Us</li>


      </ul>
    </div>
    <!--End of link panel div-->
  </div>

  <div class='footer'>

  </div>
</body>

</html>

3 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
.container {
  display: block;
  margin: 0px auto;
  width: 100%;
}
.footer {
  display: block;
  width: 100%;
  height: 500px;
  background-color: black;
  margin-top: 0px;
}
html,
body {
  position: relative;
  height: 100%;
  background-color: #f2f2f2;
}
.control_panel {
  position: relative;
  display: inline-block;
  width: 60%;
  height: 100%;  // A CHANGE HERE
  margin-left: 0px;
}
.control_title {
  display: block;
  background-color: white;
  height: 100px;
  margin-bottom: 30px;
}
.control_settings {
  display: block;
  background-color: white;
  width: 900px;  // REMOVED HEIGHT HERE
}
.link-panel {
  position: relative;
  float: left;
  width: 30%;
  height: 100%;
  background-color: #333333;
}
.link-panel ul {
  list-style-type: none;
  font-size: 19px;
  margin-top: 35px;
}
.link-panel li {
  margin-top: 15px;
}
＆＃13; 
<!-- Code order changed --->
<div class="container">
  <div class="link-panel">
    <ul>
      <li>Dashboard</li>
      <hr>
      <li>Blog</li>
      <hr>
      <li><span><b>|</b> Settings</span>
      </li>
      <hr>
      <li>Contact Us</li>
    </ul>
  </div>
  <!--End of link panel div-->
  <div class='control_panel'>
    <div class='control_title'>
      <h2>Your Settings</h2>
    </div>
    <div class='control_settings'>
    </div>
  </div>
</div>
<div class='footer'></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您希望子div为100％高度或其各自的父div，然后您可以使用位置来实现此目的。

请参阅更新的小提琴。

.container {
  display: block;
  margin: 0px auto;
  width: 100%;
  padding-left:30%;
  box-sizing:border-box;
  position:relative;
}
.link-panel {
    position: absolute;
    float: left;
    width: 30%;
    height: 100%;
    background-color: #333333;
    left: 0;
    top: 0;
}

https://jsfiddle.net/pd5bLv63/3/

答案 2 :(得分：0)

 <html>
 <head>
 <style>
 html, body {
    position: relative;
    height: 100%;
    background-color: #f2f2f2;
}
.left-container {
    width: 30%;
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
}
.link-panel {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    background-color: #333333;
}
.link-panel ul {
    list-style-type: none;
    font-size: 19px;
    margin-top: 35px;
}

.link-panel li {
    margin-top: 15px;
}
.right-container {
    width: 70%;
    margin-left: 30%;
    clear: right;
    display: block;
    height: 100%;
}
.control_panel {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-left: 0px;
}
.control_title {
    display: block;
    background-color: white;
    height: 50px;
}
h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
.control_settings {
    display: block;
    background-color: white;
    width: 100%;
}
.footer {
    display: block;
    width: 100%;
    height: 500px;
    background-color: black;
    margin-top: 0px;
    position: fixed;
    top: 90%;
    left: 0;
}
</style>
 </head>
 <body>
    <div class="left-container">
        <div class="link-panel">
        <ul>
        <li> Dashboard</li>
          <hr>
          <li> Blog</li>
          <hr>
          <li><span><b>|</b> Settings</span></li>
          <hr>
          <li> Contact Us</li>
        </ul>
      </div>
    </div>
      <!--End of link panel div-->
      <div class="right-container">
      <div class='control_panel'>
        <div class='control_title'>
          <h2>Your Settings</h2>
        </div>
    </div> 

        <div class='control_settings'>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
    </div>

    <div class='footer'>

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