Question

这个副本没有解决，因为我不想使用JS。 CSS: Sidebar fixed width with background to edge of window

这就是我想要实现的目标：

基本上所有内容都必须位于具有特定宽度的div中，并设置为margin: 0 auto的中心。在这个div中，必须有一个main div，背景为白色，sidebar背景为蓝色。

我不想使用javascript。纯CSS不可能吗？

当前代码（不工作）：https://jsfiddle.net/0p9jrnq1/1/

Answer 1

使用固定的方式执行此操作对我来说似乎很难。如果你可以使用百分比，那么这是有效的。您需要添加的就是使用媒体查询，以便在较小的屏幕中查看此布局时缩小尺寸或隐藏左右排水沟。

HTML：

<div class="container">
    <div class="left-gutter"></div>
    <div class='content'>
        <div class="main"> </div>
        <div class="sidebar"> </div>
    </div>
    <div class="right-gutter">
</div>

CSS：

.container {
    width:100%;
}

.container > .left-gutter, .container > .right-gutter {
    width:20%;
}

.container > .left-gutter {
  height:100%;
  float:left;
}

.container > .right-gutter {
  height:100%;
  background: #0000FF;
  float:right;
}

.container > .content {
    width: 60%;
    height:100%;
    float:left;
    min-width: 200px;/*Your minimum fixed width here*/
}

.container > .content > .main {
    width: 80%; /*Width for the content area in %*/
    float: left;
    height:100%;
    background:#FFFFFF;
}
.container > .content > .sidebar {
    width: 20%; /*Width for the sidebar area in %*/
    float: right;
    height:100%;
    background:#0000FF;
}

确保主要和侧边栏的宽度百分比合计为100％

使用填充和边距将要求您相应地调整元素的宽度。

Answer 2

看看这个布局

＆＃13;

body {
    margin: 0;
    padding: 0;
}

#header {
    background-color: #02CC02;
    width: 100%;
    position: relative;
    z-index: 2;
}

#header .clearfix {
    padding: 40px;
}

#main-content {
    background-color: white;
}

.page-content {
    margin: 0 auto;
    width: 55%;
}

#sidebar {
    background-color: rgba(238, 130, 238, 0.92);
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%;
    z-index: 1;
}

#sidebar .clearfix {
    padding: 60px;
}

＆＃13;

<div id="header">
    <div class="clearfix"></div>
</div>
<div id="main-content">
    <div class="page-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor blandit mauris, vel ornare metus cursus eu. Maecenas faucibus nisl non mauris sagittis, at porttitor lorem vestibulum. Curabitur vulputate facilisis nunc nec imperdiet. Sed finibus risus eu quam bibendum, imperdiet commodo felis condimentum. Morbi dapibus, libero eu malesuada sagittis, justo urna ullamcorper odio, a venenatis orci turpis ac nisi. Ut porta commodo nibh, at auctor nisi dapibus sit amet. Nullam tincidunt urna at nisi finibus dictum.</p>
        <p>Duis orci purus, varius vel dolor a, pharetra mattis ipsum. Duis aliquam velit sed ex consequat pretium. Donec eleifend mattis elit, sit amet accumsan diam sodales id. Nulla sed sem nisl. Sed mattis nunc massa, eget ultrices ex luctus sit amet. Curabitur porttitor turpis non tortor venenatis, at blandit dui elementum. Proin vehicula, augue ac tempor euismod, erat quam iaculis velit, a bibendum erat sapien sed dolor. Proin sed augue convallis, molestie sem id, finibus ante. Ut in tincidunt ligula, non rutrum tortor. Cras eu ex eleifend, volutpat nibh at, faucibus nunc. Nam eget augue porta, congue tellus id, viverra turpis. Curabitur quis felis ligula. Phasellus lacus erat, molestie eget sapien quis, luctus feugiat mi. Nam tristique, sem eget aliquam interdum, ligula neque malesuada diam, vitae rhoncus elit est eu arcu.</p>
        <p>Etiam finibus purus mattis, elementum nibh sit amet, eleifend nulla. Duis tortor eros, bibendum eget mattis nec, feugiat quis sem. Curabitur consequat urna in turpis facilisis maximus. Nulla elementum molestie ligula. Vestibulum eleifend fermentum quam ut sagittis. Integer nunc tortor, condimentum et posuere vel, vestibulum quis leo. Ut feugiat vehicula arcu, laoreet vehicula mi rutrum vitae.</p>
        <p>In venenatis, erat eu interdum ornare, leo magna eleifend elit, vitae fermentum metus dui vel quam. Vivamus auctor lacinia porta. Nullam vitae vestibulum libero. Quisque tincidunt pellentesque metus, sit amet pharetra est mattis quis. Sed mattis, nisl a interdum porttitor, velit ligula lacinia orci, sed hendrerit augue dolor vel nisi. Aliquam ut ex vitae nunc aliquam aliquam et in mi. Phasellus sit amet ante quis ipsum cursus volutpat eget eget lectus. Curabitur tempor sed odio id pulvinar. Suspendisse sed elit egestas, lobortis est id, aliquet urna. Mauris ac purus at justo condimentum rutrum non eget libero. Quisque scelerisque erat sed orci consequat suscipit. Quisque sit amet dui hendrerit, commodo arcu quis, tristique quam. Phasellus feugiat nulla velit, nec condimentum nisl varius eget. Mauris facilisis et arcu vitae ultrices. Vivamus viverra, lorem vitae eleifend vulputate, neque sem volutpat ante, eget rhoncus erat nisl ac turpis.</p>
    </div>
</div>
<div id="sidebar">
    <div class="clearfix"></div>
</div>

＆＃13;

使用JS显示和隐藏侧栏

Answer 3

试试这个..

.sidebar {
position: static;
}
.sidebar:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 22%; (adjust till get the right width)
height: 100%;
bacgkround: (the sidebar background);
z-index: (below sidebar);
}

侧边栏与背景流体到窗口的边缘

3 个答案: