保持宽高比并正常使用div？

Question

我仍然在理解我的div时有点麻烦。我试图建立一个根据浏览器/屏幕大小改变其大小的网站。

我已经走到了这一步：

我的HTML：

<div id="wrapper">
  <div id="header">Header</div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="footer">Footer</div>
</div>

我的css：

#wrapper{width: 60%;}

#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left;  width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}

现在我的div是正确的大小，问题是conect总是在div的底部，但我需要它像一个普通的div，所以我可以做任何我想要的东西。 什么是最简单的方式来使用它像普通的div？

感谢您的帮助！ ：）

编辑： 这是它的样子：http://jsfiddle.net/rswML/ ......正如我所说的问题是文本始终位于div的底部。我理解它是因为填充顶部但是我需要它来保持高比率宽度并且仍然正常使用div。

Answer 1

您在这里尝试的是响应式设计理念。我建议你试试bootstrap框架。

可以通过简单地向div中添加一个类来完成所有操作，而不是通过自己的方式完成所有操作。

  

响应式网页设计（RWD）是一种旨在制作的网页设计方法   网站提供最佳的观看体验 - 易于阅读和   导航，最小化调整大小，平移和滚动   各种设备

Answer 2

我认为问题可能在于您的填充值。也许调整它们可以让你拥有你想要的控制，或者一个优势可能更好。此外，不确定您是否希望排列元素#left和#right的顶部，但这些填充设置可能会呈现不同的值。具有百分比的padding-top属性引用包含块的宽度。希望有所帮助。欢呼声。

Answer 3

解决方案是我必须使标题div位置：relative然后在其中创建另一个div，即position：absolute和width / height：100％。