目前我正在尝试设计索引页。
我遇到了两个柱子高度相同的问题，而且左边总有一个额外的空间，大约5~10px。
问题：
我试过的解决方案：
我尝试设置高度= 100％，或者设置为特定数量的px，但是，列会达到单独的高度。
我还试图删除所有的填充和边距，但左侧总是有一个额外的空间，导致身体和h1标题混合＆＃34;因为它们具有相同的背景颜色。
<!DOCTYPE html>
<html>
<head>
<title>Web Based Metrics</title>
<style type="text/css">
body {
width: 100%;
font-family: Arial, Verdana, sans-serif;
color: #665544;
background-color: #74AFAD}
.column1 {
float: left;
width: 21%;
padding: 0px 5px 5px 5px;
margin: 0px 5px 0px 0px;
background-color: #AACECD;
color: #D9853B;}
.column2 {
float: left;
width: 76%;
padding: 0px 0px 5px 5px;
background-color: #ECECEA;
color: #000000;}
h1 {
float:left
position: relative;
padding: 50px 0px 0px 5px;
margin: 0px 0px 0px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #74AFAD;
color: #ffffff;}
h2 {
float:left
position: relative;
padding: 15px 0px 0px 5px;
margin: 0px 0px 5px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #558C89;
color: #ffffff;}
h4 {
color: #ffffff;}
p {
position: relative;
bottom: 100%}
</style>
</head>
<body>
<h1>Web Based Metrics</h1>
<h2>Title 2!</h2>
<div class="column1">
<h4> something </h4>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
<div class="column2">
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
</body>
</html>
答案 0 :(得分：1)
首先：
body{
margin: 0px;
}
将修复末尾的保证金。
如果您的文字数量不同，并且两者的宽度设置不同，您的列的大小将永远不会相同。
答案 1 :(得分：1)
要获得更深入的了解，请参阅此http://jsfiddle.net/PhilippeVay/sFBGX/2/
只需将div显示为表格单元格。
container {display: table;}
child1{display: cell;}
child2 {display: cell;}
这是解决方案
<强> 1。 CSS
.container{
display: table;
table-layout: fixed;
}
body {
width: 100%;
font-family: Arial, Verdana, sans-serif;
color: #665544;
background-color: #74AFAD}
.col {
display: table-cell;
vertical-align: top;}
.column1 {
width: 21%;
padding: 0px 5px 5px 5px;
margin: 0px 5px 0px 0px;
background-color: #AACECD;
color: #D9853B;}
.column2 {
width: 76%;
padding: 0px 0px 5px 5px;
background-color: #ECECEA;
color: #000000;}
h1 {
float:left
position: relative;
padding: 50px 0px 0px 5px;
margin: 0px 0px 0px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #74AFAD;
color: #ffffff;}
h2 {
float:left
position: relative;
padding: 15px 0px 0px 5px;
margin: 0px 0px 5px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #558C89;
color: #ffffff;}
h4 {
color: #ffffff;}
p {
position: relative;
bottom: 100%}
<强> 2.HTML
<h1>Web Based Metrics</h1>
<h2>Title 2!</h2>
<div class="container">
<div class="column1 col">
<h4> something </h4>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
<div class="column2 col">
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
</div>