html - 所有屏幕的右侧内容中心

Question

我在页面的右侧内容中心遇到了问题。

我的 HTML 页面是 2 列页面，左列是固定的(高度 100% 和宽度 350px)，右侧内容宽度是 575px，所以我想在所有屏幕的右侧内容中心，例如屏幕宽度是 1600px，所以它是正确的侧内容中心在 1250px (1600px-350px.

谢谢先进

Answer 1

http://jsfiddle.net/md3Dp/5/

http://caniuse.com/#feat=calccalc() 是一种原生的 CSS 计算方法。我们现在可以为内容列设置动态宽度。对 calc() 的桌面支持相当不错。在不支持 calc() 时添加回退。基于父级的最大宽度 1600px 添加 % 宽度后退。

html,body {
margin:0;
padding:0;
height:100%;
}

.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}

.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}

.content {

width:78.125%;/* fall back */
width:-moz-calc(100% - 350px); 
width:-webkit-calc(100% - 350px); 
width:calc(100% - 350px);
float:left;
background:green;
}