[英]HTML/CSS need div to take 100% of vertical height of parent
我正在尝试创建一个代表这个小提琴的网页...
http://jsfiddle.net/jeljeljel/5BSva/
我希望选项卡下的左侧导航的垂直线绘制到页面底部的页脚顶部。
页脚功能需要保留。 也就是说,如果页面内容没有占据整个页面,则页脚将保留在底部。 并且如果页面内容超出视口的高度,则页脚将被下推。
谁能解决这个问题? 这无疑是具有挑战性的。
的HTML
<div class="wrapper">
<div class="header">
HEADER
</div>
<div class="body">
<ul class="nav nav-tabs" id="tabcontrol">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" style="">
<div class="navigation" style="">
navigation<br />
navigation<br />
navigation<br />
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div class="push">
</div>
</div>
<div class="footer center">
<div style="border-bottom: 2px solid rgb(174, 174, 201); background-color: #fff;"></div>
<div>
FOOTER
</div>
</div>
的CSS
.body {
border: 1px solid rgb(174, 174, 201);
border-top: 5px solid rgb(174, 174, 201);
border-bottom: 5px solid rgb(174, 174, 201);
border-left: 2px solid rgb(174, 174, 201);
border-right: 2px solid rgb(174, 174, 201);
padding-bottom: 1000px;
margin-bottom: -1000px;
}
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px auto; /* the bottom margin is the negative value of the footer's height */
overflow: hidden;
}
.footer {
height: 50px;
background-color: #f8f8f8;
}
.footer, .push {
height: 50px; /* .push must be the same height as .footer */
clear: both;
}
form {
height: 100%;
}
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
.navigation {
float: left;
width: 150px;
border-right: 3px solid rgb(174, 174, 201);
padding-top: 10px;
white-space: nowrap;
}
.content {
padding-top: 10px;
}
.nav {
margin-bottom: 0px;
}
OK完成。
您只需要使列的位置完全固定,然后调整其余部分即可。
这是您必须添加才能完成此工作的代码。
.navigation {
position:absolute;
bottom:50px;
top:65px;
}
.content {
margin-left:160px;
}
这是您更新的小提琴(我做了一个红色的页脚,使其更明显)
希望这可以帮助
干杯
如果我了解您的需求,则需要创建一个人造栏!
http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns
:)希望这会有所帮助并回答您的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.