2016-11-02 41 views
1

我有一個容器類。那個班裏面都是我的元素。包括垂直條(鏈接面板)和它旁邊的div(control_panel)。我試圖給我的垂直酒吧高度:100%。我知道我必須爲容器類提供100%的高度才能工作,但每次我嘗試這樣做(control_panel)div都在頁腳頂部(不在容器中的元素)上運行。我已經做了一個我正在經歷的jsfiddle,但請注意,實際文件中的頁腳是動態添加到HTML中的,所以這就是爲什麼我沒有將它包含在我的容器類中的原因。)給豎條高度100%

我已經也嘗試給身體高度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>

+0

,如果你指定什麼'背景顏色:#333333;''到.container'? – Banzay

回答

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; 
} 

+0

這正是我想要的。謝謝! – user2896120

1

.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; 
 
}
<!-- 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>

+0

當我開始向control_settings添加內容時,這不起作用。 control_panel的高度變得大於鏈接面板的高度。我希望鏈接面板的高度始終爲頁面的100%。 – user2896120

+0

你想粘右側面板? –

+0

是的,右面板不應該從它的位置移動 – user2896120

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>