Question

我正在制作侧边栏固定在左侧，但侧边栏没有正确放置。

这是我的代码，

HTML

<div class="wrapper">
    <div class="sidebar">Sidebar</div>
    <div class="contents">
        <div class="header">Header</div>
        <div class="main-content">contents</div>        
    </div>
</div>

CSS

/* apply a natural box layout model to all elements */

*, *:before, *:after {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

body {

    margin:0;

    padding:0;

}

.wrapper {

    width: 100%;

    height:100%;

    overflow-x: hidden;

    clear:both;

}

.sidebar {

    float:left;

    border: 1px solid red;

    position: fixed;

    width: 20%;

    height: 100%;

    color: red;

}

.contents {

    border: 5px solid yellow;

    float:left;

    width: 80%;

    height: 100%;

    color: green;

}

我很感谢ans的详细原因。不仅是代码。

Fiddle

Answer 1

没有发生这种情况，因为你的侧边栏从左边0开始，你的内容也是。

将内容从左侧移动为侧边栏的宽度。

写：

.contents {
    margin-left:20%;
}

此处更新了fiddle。

Answer 2

向sidebar添加包装，并在css

中进行一些更改

选中 DEMO

<div class="wrapper">
    <div class="sidebarWrap">
        <div class="sidebar">Sidebar</div>
    </div>
    <div class="contents">
        <div class="header">Header</div>
        <div class="main-content">contents</div>
    </div>
</div>


*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

.wrapper {
    width: 100%;
    height:100%;
    overflow-x: hidden;
    clear:both;
}

.sidebarWrap {
    float:left;
    border: 1px solid red;
    width: 20%;
    height: 100%;
    color: red;
}
.sidebar{
    position: fixed;
    height: 100%;
}

.contents {
    border: 5px solid yellow;
    float:left;
    width: 80%;
    height: 100%;
    color: green;

}

Answer 3

比你想象的更容易，你编码

<div class="wrapper">
<div class="sidebar">Sidebar</div>
<div class="contents">
    <div class="header">Header</div>
    <div class="main-content">contents</div>
</div>
</div>

contents div不在里面，因为您没有将其插入sidebar

试试这个

<div class="wrapper">
<div class="sidebar">Sidebar
<div class="contents">
    <div class="header">Header</div>
    <div class="main-content">contents</div>
   </div>
  </div>
</div>

注意<div class="sidebar">Sidebar http://jsfiddle.net/2e95b/ 但如果您不想包含黄色边框div，请尝试http://jsfiddle.net/6skQg/ 注意：contents有float:right;

固定侧边栏css不起作用

我很感谢ans的详细原因。不仅是代码。

3 个答案: