我试图将页面拆分为两部分。 根据其中任何一个，其他部分的高度应该扩大和折叠。
我尝试制作此布局，但无法预测其中存在的问题。 这是小提琴的链接。
我不想在容器上应用一些最小高度，因为内容可以增加或减少，如果我不使用min-height整个内容被隐藏在页眉和页脚之间。
https://jsfiddle.net/j4vcLbaL/1/
HTML
<header>I am Header</header>
<body>
<div id="content">
<div class="page-wrapper">
<div class="left-col">
<div class="section">
<div class="icons">
<ul>
<li class="fa fa-cloud">1</li>
<li class="fa fa-cloud">2</li>
<li class="fa fa-cloud">3</li>
<li class="fa fa-cloud">4</li>
</ul>
</div>
<div class="text">
____Left Column----
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
<div class="right-col">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
</div>
</body>
<footer>
I am Footer
</footer>
的CSS
.page-wrapper{
position:relative;
min-height:100px;
}
#content{
margin: 0 auto;
padding: 0;
width: 100%;
position: relative;
overflow: hidden;
clear: both;
}
.left-col{
background: #ccc;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
height: 100%;
width: 40%;
}
.section {
clear:both;
padding-right:10px;
}
.icons{
position: absolute;
height: 100%;
width: 64px;
z-index: 1;
background: #999;
}
.text{
position: relative;
width: 100%;
padding-left: 64px;
}
.right-col{
background: #fff;
color:#000;
position: absolute;
right: 0px;
bottom: 0px;
top: 0px;
height: 100%;
width: 60%;
padding-left:10px;
}
答案 0 :(得分：0)
这是一个更新的布局，您可以测试列的内容和列的高度将相等。
我认为此代码对您有帮助！
/* ================================================================= */
/* Partial Section */
/* ================================================================= */
.partial_section {
position: relative;
background-color: #2196F3;
}
.partial_section::after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.partial_section::after {
background: #000d21;
}
.partial_section::after {
right: 0;
}
.content_wrapper {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 80px 0;
z-index: 2;
}
.ps_column {
display: table-cell;
vertical-align: top;
}
.section_half.ps_column {
width: 48%;
}
.ps-title {
position: relative;
margin: 20px;
}
.ps-title h3 {
font-family: 'Montserrat', sans-serif;
font-size: 26px;
font-weight: bold;
margin: 0;
}
.ps-content-wrap {
padding: 40px;
}
.ps-content {
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 20px;
}
header {
background-color: #4CAF50;
color: #ffffff;
padding: 20px;
text-align: center;
}
footer {
background-color: #E91E63;
color: #ffffff;
padding: 20px;
text-align: center;
}<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css' type='text/css' media='all' />
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<!-- Partial Section Wrapper -->
<header>
<div class="ps-title">
<h3>Header section</h3>
</div>
</header>
<div class="partial_section section-border-bottom">
<!-- Section content -->
<div class="content_wrapper">
<!-- Section Column -->
<div class="section_half ps_column">
<div class="ps-content-wrap" style="color: #ffffff;">
<div class="ps-title">
<h3>COLUMN LEFT</h3>
</div>
<div class="ps-content">
<p>Praesent gravida pretium mauris a cursus. Proin feugiat fringilla tristique. In congue libero eleifend, condimentum tortor vitae, viverra purus. Integer at fringilla sem. Donec vel posuere tortor. Sed a tempor velit. Quisque non elit ligula. Praesent
velit massa, tempor non vulputate id, iaculis eget nulla. In hac habitasse platea dictumst. </p>
<p>Nullam scelerisque arcu dui, sed feugiat nunc dictum at. Mauris porttitor enim et massa dictum mattis. Cras non porttitor magna, nec aliquet ipsum. Nulla ac diam gravida, congue quam in, porta lorem. Integer vestibulum tempor urna sed porttitor.
Phasellus pellentesque purus id suscipit fringilla.</p>
</div>
</div>
</div>
<!-- Section Column -->
<div class="section_half ps_column">
<div class="ps-content-wrap" style="color: #ffffff;">
<div class="ps-title">
<h3>COLUMN RIGHT</h3>
</div>
<div class="ps-content">
<p>Praesent gravida pretium mauris a cursus. Proin feugiat fringilla tristique. In congue libero eleifend, condimentum tortor vitae, viverra purus. Integer at fringilla sem. Donec vel posuere tortor. Sed a tempor velit. Quisque non elit ligula. Praesent
velit massa, tempor non vulputate id, iaculis eget nulla. In hac habitasse platea dictumst. </p>
<p>Nullam scelerisque arcu dui, sed feugiat nunc dictum at. Mauris porttitor enim et massa dictum mattis. Cras non porttitor magna, nec aliquet ipsum. Nulla ac diam gravida, congue quam in, porta lorem. Integer vestibulum tempor urna sed porttitor.
Phasellus pellentesque purus id suscipit fringilla.</p>
<p>Nullam scelerisque arcu dui, sed feugiat nunc dictum at. Mauris porttitor enim et massa dictum mattis. Cras non porttitor magna, nec aliquet ipsum. Nulla ac diam gravida, congue quam in, porta lorem. Integer vestibulum tempor urna sed porttitor.
Phasellus pellentesque purus id suscipit fringilla.</p>
<p>Nullam scelerisque arcu dui, sed feugiat nunc dictum at. Mauris porttitor enim et massa dictum mattis. Cras non porttitor magna, nec aliquet ipsum. Nulla ac diam gravida, congue quam in, porta lorem. Integer vestibulum tempor urna sed porttitor.
Phasellus pellentesque purus id suscipit fringilla.</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="ps-title">
<h3>Footer section</h3>
</div>
</footer>
答案 1 :(得分：0)
你可以使用css flex-box：
CSS:
.page-wrapper{
display: flex;
flex-direction: row;
position:relative;
min-height:100px;
}
#content{
margin: 0 auto;
padding: 0;
width: 100%;
position: relative;
overflow: hidden;
clear: both;
}
.left-col{
background: #ccc;
width: 40%;
}
.section {
clear:both;
padding-right:10px;
}
.icons{
position: absolute;
height: 100%;
width: 64px;
z-index: 1;
background: #999;
}
.text{
position: relative;
width: 100%;
}
.right-col{
background: #fff;
color:#000;
height: 100%;
width: 60%;
padding-left:10px;
}