两个固定Div的响应Div

Question

下午好。

这是我第一次响应式布局，从我读过的内容中，我试图构建一个。

我做了一个代表我迄今为止工作的小提琴，而且我被卡住了。

我有父母的相对宽度，它被设置为屏幕的90％，并居中（垂直和水平）。

在这个div中，还有另外3个部分，第一个是在160px高度的绝对大小，第二个是相对的（从我的计算，接近77.56％），第三个是绝对大小大小在30px高度。

所以我的两个问题是：

-The包裹格在全屏（1920×1080）正确对齐，但是当它到达低分辨率，那双方DIV开始溢出（垂直和水平），我该如何解决？

- 三个div的计算似乎在不同的高度是正确的（因为它也开始从wrap div溢出）。

OBS：在小提琴中，div的高度似乎不起作用，我不知道为什么。

（

#wrap div#content{ 
    position:relative; 
    background-color: teal; 
    height: 77.5678866593353%; 
    max-height: 100%; 
} 

）

这里有一个小提琴：http://jsfiddle.net/LKQfg/1/

很抱歉，但我认为这些问题是一个烂摊子，我无法解释得很好。

谢谢。

Answer 1

问题是边框和填充。要将元素居中，请给它自动保留左右边界。 Fiddle。

div#wrap { margin: 0 auto 2.5% }