html - 页面左侧的导航栏，如何让内容调整大小以匹配屏幕大小？

Question

所以 - 我有一个网站，为了导航，我在 div 的左侧有一个栏:

#menu {
float : left; 
border-style : dashed none; 
border-width : 1px; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
width : 190px; 
margin-top : 20px; 
}

右边的内容也在一个div中:

#content {
padding-top : 10px; 
margin-top : 20px; 
position : relative; 
width : 760px; 
float : right; 
}

所有内容都包含在一个名为 page 的 div 中:

#page {
width : 100%; 
margin-left : 30px; 
margin-right : auto; ; 
} 

当屏幕尺寸与页面的 960 像素宽度相匹配时，它看起来很好，但如果不匹配，则内容不会扩展或收缩以适合。但是，如果我将 width:100% 放在 #content CSS 中，则内容 Pane 会出现在底部，因为它不能放在它的右侧。

我怎样才能修复它，使菜单 div 具有 190px 的宽度，而内容 div 将占用剩余的宽度？

我没有使用任何其他框架，因此需要 jquery 的解决方案没有用。

Answer 1

您可以在现代浏览器的 CSS 中使用 calc()( docs ):

#content {
 padding-top : 10px; 
 margin-top : 20px; 
 position : relative; 
 width : calc(100% - 190px); 
 float : right; 
}