我有一些问题:
如何将导航,conversationList和会话部分扩展到底部?
如果其中一个扩大了它们的大小(例如一个长文本)。如何将相同的尺寸应用于所有3?
HTML
<header>
Text
</header>
<main>
<nav>
Navigation
</nav>
<section id="contentWrapper">
<section id="contentTitle">
TITLE
</section>
<section id="conversationList">
List
</section>
<section id="conversation">
Conversation
</section>
</section>
</main>
CSS
html, body{
height: 100%;
width: 100%;
margin:0px !important;
}
header{
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: #777;
z-index: 1;
}
main{
float: left;
padding-top: 60px;
background-color:black;
bottom:0px;
width:100%;
min-height: calc(100% - 60px);
}
nav{
float: left;
width: 15%;
min-height: 100%;
background-color: green;
}
#contentTitle{
float: left;
width: 98.5%;
height: 35px;;
padding-top: 25px;
padding-left: 1.5%;
background-color: red;
}
#contentWrapper{
float: left;
width: 85%;
min-height: 100%;
}
#pageTitle{
float: left;
width: 100%;
height: 40px;
padding-top: 20px;
padding-left: 3%;
background-color: red;
}
#conversationList{
float: left;
width: 30%;
background-color: white;
}
#conversation{
float: left;
width: 70%;
background-color: yellow;
}
答案 0 :(得分:2)
基本答案是将height: 100%
应用于您想要拉伸的每个元素。你必须记住给每个父元素一个100%的高度,比如#contentWrapper
需要height: 100%
。
Have a fiddle!
我已经完全为你重写了这个:
玩弄它以便你了解它是如何工作的。
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
header {
height: 60px;
background: green;
}
main {
display: table;
width: 100%;
height: calc(100% - 60px);
}
nav {
display: table-cell;
width: 60px;
background: green;
}
#contentWrapper {
display: table;
width: 100%;
height: calc(100% - 60px);
}
#contentTitle {
width: 100%;
height: 60px;
background: red;
}
#conversationList {
width: 80px;
float: left;
height: calc(100% - 60px);
background: yellow;
}
#conversation {
float: left;
width: calc(100% - 80px);
height: calc(100% - 60px);
background: pink;
}
HTML
<header>
Text
</header>
<main>
<nav>
Navigation
</nav>
<section id="contentTitle">
TITLE
</section>
<section id="conversationList">
List
</section>
<section id="conversation">
Conversation
</section>
</main>