无论使用CSS Tables，我都试图给2列相同的高度：
display: table和display: table-cell
我遇到的问题是，如果我的内容中没有至少1个段落标记，那么＆＃34;表格单元格＆＃34;不要填写。我的问题是，为什么会这样呢？为什么段落标记（或缺少标记）会触发列平等？
修改
CSS表和height: 100%的目的是使两个列都具有动态高度，并且两个列具有相同的高度。因此，任何类型的静态高度都可以解决问题，但总体上会破坏CSS表的目的。
代码块::正常工作
main {
display: table;
height: 100%;
width: 1200px;
margin: 0 auto;
}
main #sidebar,
main #content {
display: table-cell;
height: 100%;
}
#sidebar {
float: left;
text-align: center;
width: 225px;
border: 1px solid #A8A9AD;
background: #E8E9EB;
background: -webkit-linear-gradient(top, #FFF 0%,#E8E9EB 60%);
background: linear-gradient(to bottom, #FFF 0%,#E8E9EB 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e9eb',GradientType=0 );
}
#content {
float: right;
width: 925px;
}
#content h1.post-title {
display: inline-block;
margin: 8px 0 12px 0;
text-transform: uppercase;
}
#content hr.clear {
margin-bottom: 20px;
}<main>
<aside id="sidebar">
Sidebar
</aside> <!-- id="sidebar" -->
<article id="content">
<h1 class="post-title">Page Title</h1>
<hr class="clear" />
<h1>First shalt thou take out the Holy Pin</h1>
<p>No, no, no! Yes, yes. A bit. But she's got a wart. Shut up! Will you shut up?! I'm not a witch. She looks like one. Oh, ow!</p>
<h2>I'm not dead!</h2>
<p>And the hat. She's a witch! Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! Where'd you get the coconuts? He hasn't got shit all over him.</p>
<ul>
<li>Camelot!</li>
<li>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</li>
<li>Well, I didn't vote for you.</li>
<li>Burn her anyway!</li>
<li>We want a shrubbery!!</li>
</ul>
<h3>How do you know she is a witch?</h3>
<p>On second thoughts, let's not go there. It is a silly place. The Knights Who Say Ni demand a sacrifice! Well, how'd you become king, then? Burn her anyway! Camelot! It's only a model.</p>
<h4>How do you know she is a witch?</h4>
<p>And this isn't my nose. This is a false one. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Well, I got better. Where'd you get the coconuts? It's only a model.</p>
<ol>
<li>The Knights Who Say Ni demand a sacrifice!</li>
<li>Be quiet!</li>
<li>Bring her forward!</li>
</ol>
<h5>Bridgekeeper</h5>
<p>We want a shrubbery!! It's only a model. Well, I didn't vote for you.</p>
</article> <!-- id="content" -->
<div class="clear"></div>
</main>
代码块::已损坏
main {
display: table;
height: 100%;
width: 1200px;
margin: 0 auto;
}
main #sidebar,
main #content {
display: table-cell;
height: 100%;
}
#sidebar {
float: left;
text-align: center;
width: 225px;
border: 1px solid #A8A9AD;
background: #E8E9EB;
background: -webkit-linear-gradient(top, #FFF 0%,#E8E9EB 60%);
background: linear-gradient(to bottom, #FFF 0%,#E8E9EB 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e9eb',GradientType=0 );
}
#content {
float: right;
width: 925px;
}
#content h1.post-title {
display: inline-block;
margin: 8px 0 12px 0;
text-transform: uppercase;
}
#content hr.clear {
margin-bottom: 20px;
}<main>
<aside id="sidebar">
Sidebar
</aside> <!-- id="sidebar" -->
<article id="content">
<h1 class="post-title">Page Title</h1>
<hr class="clear" />
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
</article> <!-- id="content" -->
<div class="clear"></div>
</main>
我已经创建了一些JSFiddles以显示我的意思：
答案 0 :(得分：0)
为它们设置最大高度。你可以使用一分钟，但如果你不想响应，请保持高度：100％in。
// CSS
main {
display: table;
min-height: 100%;
width: 1200px;
margin: 0 auto;
}
main #sidebar,
main #content {
display: table-cell;
min-height: 100%;
}
答案 1 :(得分：0)
感谢Sergiy T.我找到了解决方案。我想这个问题与浮动＆＃34;单元格＆＃34;有关，而两个都可以浮动它会破坏表格的高度（即使明显被清除）。该解决方案与不浮动其中一个单元格有关。
解决方案
从#sidebar移除 float ，但为其提供vertical-align: top。问题解决了！
main {
display: table;
height: 100%;
width: 1200px;
margin: 0 auto;
}
main #sidebar,
main #content {
display: table-cell;
height: 100%;
}
#sidebar {
vertical-align: top;
text-align: center;
width: 225px;
border: 1px solid #A8A9AD;
background: #E8E9EB;
background: -webkit-linear-gradient(top, #FFF 0%,#E8E9EB 60%);
background: linear-gradient(to bottom, #FFF 0%,#E8E9EB 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e9eb',GradientType=0 );
}
#content {
float: right;
width: 925px;
}
#content h1.post-title {
display: inline-block;
margin: 8px 0 12px 0;
text-transform: uppercase;
}
#content hr.clear {
margin-bottom: 20px;
}<main>
<aside id="sidebar">
Sidebar
</aside> <!-- id="sidebar" -->
<article id="content">
<h1 class="post-title">Page Title</h1>
<hr class="clear" />
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
<div>Ni !</div>
</article> <!-- id="content" -->
<div class="clear"></div>
</main>
答案 2 :(得分：0)
如果删除float并为空格添加填充，它会解决问题吗？
我认为花车不适合桌面式显示器。 它可能无法在不同的浏览器中显示。