固定左侧导航+剩余空间

我试图用CSS实现以下内容：我想要一个固定边栏带导航，这样当您向下滚动时，边栏就会保留在它的位置。剩下的空间应该填满我的内容，就好像它是100％的身体一样。固定左侧导航+剩余空间

但是，我的问题是，正确的部分右侧多出300px的空间，导致水平滚动条。

我无法自己找出解决方案，有人可以帮我吗？非常感谢！ :)

nav { 
    height: 100%; 
    width: 300px; 
    position: fixed; 
    z-index:99; 
} 

#wrapper { 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
    margin-left:300px; 
}

来源

2014-07-11 Wouter C

如果您在http://jsfiddle.net工作示例 – MightyPork

你的意思是它总是帮助[这样？]（http://jsfiddle.net/cuplizian/k72GX/2/）不同的是'.side'不是'固定的' –

Do you mean something like this?

我给#wrapper元素一些新的CSS属性：

height: 1200px; 
    background-color: red;

的height: 1200px在这种情况下只是为了测试，使页面更长。
background-color: red也只是用于测试，使其更加明显。

你nav元素我已经给下面的CSS属性：

height: 100%; 
    width: 20%; 
    position: fixed; 
    background-color: green;

的height: 100%被用来制造元素填充页面的高度
的width: 20%被用来使它宽度为20%。
position: fixed是使元素粘在页面上的某个点上。
background-color用于测试，所以你可以更好地看到你在做什么。

而且，我建议使用CSS复位。这是使用在拨弄一个很简单的一个IM：

* { 
    margin: 0; 
    padding: 0; 
}

它basicly选择所有元素，并赋予它一个margin和0padding。

如果你想nav元素是300px宽，使用this fiddle。

修正了显示

将以下属性添加到您的#wrapper元素wasnt内容：

width: calc(100% - 300px); 
float: right;

所以它看起来像这样：

#wrapper { 
    width: calc(100% - 300px); 
    height: 1200px; 
    background-color: red; 
    float: right; 
}

Demo here

来源

2014-07-11 22:30:28 Bas

百分比宽度将解决问题，但我想要一个固定的。此外，内容不可见在你的小提琴:( –

试试这个：http://jsfiddle.net/ALGpP/3/它使用'px'作为宽度。我知道，现在修复。 – Bas

@WebmasterWouter修正了它，看到更新后的线程 – Bas

固定左侧导航+剩余空间

回答

相关问题